diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..2970e76c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,380 @@ +root = true + +# All files +[*] +indent_style = space + +# Xml files +[*.xml] +indent_size = 2 + +# C# files +[*.cs] + +#### Core EditorConfig Options #### + +# Indentation and spacing +indent_style = space +indent_size = 4 +tab_width = 4 +charset = utf-8 + +# New line preferences +insert_final_newline = false + +#### .NET Coding Conventions #### +[*.{cs,vb}] + +# Organize usings +dotnet_separate_import_directive_groups = true +dotnet_sort_system_directives_first = true +file_header_template = unset + +# this. and Me. preferences +dotnet_style_qualification_for_event = false:silent +dotnet_style_qualification_for_field = false:silent +dotnet_style_qualification_for_method = false:silent +dotnet_style_qualification_for_property = false:silent + +# Language keywords vs BCL types preferences +dotnet_style_predefined_type_for_locals_parameters_members = true:silent +dotnet_style_predefined_type_for_member_access = true:silent + +# Parentheses preferences +dotnet_style_parentheses_in_arithmetic_binary_operators = always_for_clarity:silent +dotnet_style_parentheses_in_other_binary_operators = always_for_clarity:silent +dotnet_style_parentheses_in_other_operators = never_if_unnecessary:silent +dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity:silent + +# Modifier preferences +dotnet_style_require_accessibility_modifiers = for_non_interface_members:silent + +# Expression-level preferences +dotnet_style_coalesce_expression = true:suggestion +dotnet_style_collection_initializer = true:suggestion +dotnet_style_explicit_tuple_names = true:suggestion +dotnet_style_namespace_match_folder = true:suggestion +dotnet_style_null_propagation = true:suggestion +dotnet_style_object_initializer = true:suggestion +dotnet_style_operator_placement_when_wrapping = beginning_of_line +dotnet_style_prefer_auto_properties = true:suggestion +dotnet_style_prefer_collection_expression = when_types_loosely_match:suggestion +dotnet_style_prefer_compound_assignment = true:suggestion +dotnet_style_prefer_conditional_expression_over_assignment = true:suggestion +dotnet_style_prefer_conditional_expression_over_return = true:suggestion +dotnet_style_prefer_foreach_explicit_cast_in_source = when_strongly_typed:suggestion +dotnet_style_prefer_inferred_anonymous_type_member_names = true:suggestion +dotnet_style_prefer_inferred_tuple_names = true:suggestion +dotnet_style_prefer_is_null_check_over_reference_equality_method = true:suggestion +dotnet_style_prefer_simplified_boolean_expressions = true:suggestion +dotnet_style_prefer_simplified_interpolation = true:suggestion + +# Field preferences +dotnet_style_readonly_field = true:warning + +# Parameter preferences +dotnet_code_quality_unused_parameters = all:suggestion + +# Suppression preferences +dotnet_remove_unnecessary_suppression_exclusions = none + +#### C# Coding Conventions #### +[*.cs] + +# var preferences +csharp_style_var_elsewhere = false:silent +csharp_style_var_for_built_in_types = false:silent +csharp_style_var_when_type_is_apparent = false:silent + +# Expression-bodied members +csharp_style_expression_bodied_accessors = true:silent +csharp_style_expression_bodied_constructors = false:silent +csharp_style_expression_bodied_indexers = true:silent +csharp_style_expression_bodied_lambdas = true:suggestion +csharp_style_expression_bodied_local_functions = false:silent +csharp_style_expression_bodied_methods = false:silent +csharp_style_expression_bodied_operators = false:silent +csharp_style_expression_bodied_properties = true:silent + +# Pattern matching preferences +csharp_style_pattern_matching_over_as_with_null_check = true:suggestion +csharp_style_pattern_matching_over_is_with_cast_check = true:suggestion +csharp_style_prefer_extended_property_pattern = true:suggestion +csharp_style_prefer_not_pattern = true:suggestion +csharp_style_prefer_pattern_matching = true:silent +csharp_style_prefer_switch_expression = true:suggestion + +# Null-checking preferences +csharp_style_conditional_delegate_call = true:suggestion + +# Modifier preferences +csharp_prefer_static_anonymous_function = true:suggestion +csharp_prefer_static_local_function = true:warning +csharp_preferred_modifier_order = public,private,protected,internal,file,const,static,extern,new,virtual,abstract,sealed,override,readonly,unsafe,required,volatile,async:suggestion +csharp_style_prefer_readonly_struct = true:suggestion +csharp_style_prefer_readonly_struct_member = true:suggestion + +# Code-block preferences +csharp_prefer_braces = true:silent +csharp_prefer_simple_using_statement = true:suggestion +csharp_style_namespace_declarations = file_scoped:suggestion +csharp_style_prefer_method_group_conversion = true:silent +csharp_style_prefer_primary_constructors = true:suggestion +csharp_style_prefer_top_level_statements = true:silent + +# Expression-level preferences +csharp_prefer_simple_default_expression = true:suggestion +csharp_style_deconstructed_variable_declaration = true:suggestion +csharp_style_implicit_object_creation_when_type_is_apparent = true:suggestion +csharp_style_inlined_variable_declaration = true:suggestion +csharp_style_prefer_index_operator = true:suggestion +csharp_style_prefer_local_over_anonymous_function = true:suggestion +csharp_style_prefer_null_check_over_type_check = true:suggestion +csharp_style_prefer_range_operator = true:suggestion +csharp_style_prefer_tuple_swap = true:suggestion +csharp_style_prefer_utf8_string_literals = true:suggestion +csharp_style_throw_expression = true:suggestion +csharp_style_unused_value_assignment_preference = discard_variable:suggestion +csharp_style_unused_value_expression_statement_preference = discard_variable:silent + +# 'using' directive preferences +csharp_using_directive_placement = outside_namespace:silent + +#### C# Formatting Rules #### + +# New line preferences +csharp_new_line_before_catch = true +csharp_new_line_before_else = true +csharp_new_line_before_finally = true +csharp_new_line_before_members_in_anonymous_types = true +csharp_new_line_before_members_in_object_initializers = true +csharp_new_line_before_open_brace = all +csharp_new_line_between_query_expression_clauses = true + +# Indentation preferences +csharp_indent_block_contents = true +csharp_indent_braces = false +csharp_indent_case_contents = true +csharp_indent_case_contents_when_block = true +csharp_indent_labels = one_less_than_current +csharp_indent_switch_labels = true + +# Space preferences +csharp_space_after_cast = false +csharp_space_after_colon_in_inheritance_clause = true +csharp_space_after_comma = true +csharp_space_after_dot = false +csharp_space_after_keywords_in_control_flow_statements = true +csharp_space_after_semicolon_in_for_statement = true +csharp_space_around_binary_operators = before_and_after +csharp_space_around_declaration_statements = false +csharp_space_before_colon_in_inheritance_clause = true +csharp_space_before_comma = false +csharp_space_before_dot = false +csharp_space_before_open_square_brackets = false +csharp_space_before_semicolon_in_for_statement = false +csharp_space_between_empty_square_brackets = false +csharp_space_between_method_call_empty_parameter_list_parentheses = false +csharp_space_between_method_call_name_and_opening_parenthesis = false +csharp_space_between_method_call_parameter_list_parentheses = false +csharp_space_between_method_declaration_empty_parameter_list_parentheses = false +csharp_space_between_method_declaration_name_and_open_parenthesis = false +csharp_space_between_method_declaration_parameter_list_parentheses = false +csharp_space_between_parentheses = false +csharp_space_between_square_brackets = false + +# Wrapping preferences +csharp_preserve_single_line_blocks = true +csharp_preserve_single_line_statements = true + +#### Naming styles #### +[*.{cs,vb}] + +# Naming rules + +dotnet_naming_rule.types_and_namespaces_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.types_and_namespaces_should_be_pascalcase.symbols = types_and_namespaces +dotnet_naming_rule.types_and_namespaces_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.interfaces_should_be_ipascalcase.severity = suggestion +dotnet_naming_rule.interfaces_should_be_ipascalcase.symbols = interfaces +dotnet_naming_rule.interfaces_should_be_ipascalcase.style = ipascalcase + +dotnet_naming_rule.type_parameters_should_be_tpascalcase.severity = suggestion +dotnet_naming_rule.type_parameters_should_be_tpascalcase.symbols = type_parameters +dotnet_naming_rule.type_parameters_should_be_tpascalcase.style = tpascalcase + +dotnet_naming_rule.methods_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.methods_should_be_pascalcase.symbols = methods +dotnet_naming_rule.methods_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.properties_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.properties_should_be_pascalcase.symbols = properties +dotnet_naming_rule.properties_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.events_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.events_should_be_pascalcase.symbols = events +dotnet_naming_rule.events_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.local_variables_should_be_camelcase.severity = suggestion +dotnet_naming_rule.local_variables_should_be_camelcase.symbols = local_variables +dotnet_naming_rule.local_variables_should_be_camelcase.style = camelcase + +dotnet_naming_rule.local_constants_should_be_camelcase.severity = suggestion +dotnet_naming_rule.local_constants_should_be_camelcase.symbols = local_constants +dotnet_naming_rule.local_constants_should_be_camelcase.style = camelcase + +dotnet_naming_rule.parameters_should_be_camelcase.severity = suggestion +dotnet_naming_rule.parameters_should_be_camelcase.symbols = parameters +dotnet_naming_rule.parameters_should_be_camelcase.style = camelcase + +dotnet_naming_rule.public_fields_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.public_fields_should_be_pascalcase.symbols = public_fields +dotnet_naming_rule.public_fields_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.private_fields_should_be__camelcase.severity = suggestion +dotnet_naming_rule.private_fields_should_be__camelcase.symbols = private_fields +dotnet_naming_rule.private_fields_should_be__camelcase.style = _camelcase + +dotnet_naming_rule.private_static_fields_should_be_s_camelcase.severity = suggestion +dotnet_naming_rule.private_static_fields_should_be_s_camelcase.symbols = private_static_fields +dotnet_naming_rule.private_static_fields_should_be_s_camelcase.style = s_camelcase + +dotnet_naming_rule.public_constant_fields_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.public_constant_fields_should_be_pascalcase.symbols = public_constant_fields +dotnet_naming_rule.public_constant_fields_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.private_constant_fields_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.private_constant_fields_should_be_pascalcase.symbols = private_constant_fields +dotnet_naming_rule.private_constant_fields_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.public_static_readonly_fields_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.public_static_readonly_fields_should_be_pascalcase.symbols = public_static_readonly_fields +dotnet_naming_rule.public_static_readonly_fields_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.private_static_readonly_fields_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.private_static_readonly_fields_should_be_pascalcase.symbols = private_static_readonly_fields +dotnet_naming_rule.private_static_readonly_fields_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.enums_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.enums_should_be_pascalcase.symbols = enums +dotnet_naming_rule.enums_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.local_functions_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.local_functions_should_be_pascalcase.symbols = local_functions +dotnet_naming_rule.local_functions_should_be_pascalcase.style = pascalcase + +dotnet_naming_rule.non_field_members_should_be_pascalcase.severity = suggestion +dotnet_naming_rule.non_field_members_should_be_pascalcase.symbols = non_field_members +dotnet_naming_rule.non_field_members_should_be_pascalcase.style = pascalcase + +# Symbol specifications + +dotnet_naming_symbols.interfaces.applicable_kinds = interface +dotnet_naming_symbols.interfaces.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.interfaces.required_modifiers = + +dotnet_naming_symbols.enums.applicable_kinds = enum +dotnet_naming_symbols.enums.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.enums.required_modifiers = + +dotnet_naming_symbols.events.applicable_kinds = event +dotnet_naming_symbols.events.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.events.required_modifiers = + +dotnet_naming_symbols.methods.applicable_kinds = method +dotnet_naming_symbols.methods.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.methods.required_modifiers = + +dotnet_naming_symbols.properties.applicable_kinds = property +dotnet_naming_symbols.properties.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.properties.required_modifiers = + +dotnet_naming_symbols.public_fields.applicable_kinds = field +dotnet_naming_symbols.public_fields.applicable_accessibilities = public, internal +dotnet_naming_symbols.public_fields.required_modifiers = + +dotnet_naming_symbols.private_fields.applicable_kinds = field +dotnet_naming_symbols.private_fields.applicable_accessibilities = private, protected, protected_internal, private_protected +dotnet_naming_symbols.private_fields.required_modifiers = + +dotnet_naming_symbols.private_static_fields.applicable_kinds = field +dotnet_naming_symbols.private_static_fields.applicable_accessibilities = private, protected, protected_internal, private_protected +dotnet_naming_symbols.private_static_fields.required_modifiers = static + +dotnet_naming_symbols.types_and_namespaces.applicable_kinds = namespace, class, struct, interface, enum +dotnet_naming_symbols.types_and_namespaces.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.types_and_namespaces.required_modifiers = + +dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method +dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected +dotnet_naming_symbols.non_field_members.required_modifiers = + +dotnet_naming_symbols.type_parameters.applicable_kinds = namespace +dotnet_naming_symbols.type_parameters.applicable_accessibilities = * +dotnet_naming_symbols.type_parameters.required_modifiers = + +dotnet_naming_symbols.private_constant_fields.applicable_kinds = field +dotnet_naming_symbols.private_constant_fields.applicable_accessibilities = private, protected, protected_internal, private_protected +dotnet_naming_symbols.private_constant_fields.required_modifiers = const + +dotnet_naming_symbols.local_variables.applicable_kinds = local +dotnet_naming_symbols.local_variables.applicable_accessibilities = local +dotnet_naming_symbols.local_variables.required_modifiers = + +dotnet_naming_symbols.local_constants.applicable_kinds = local +dotnet_naming_symbols.local_constants.applicable_accessibilities = local +dotnet_naming_symbols.local_constants.required_modifiers = const + +dotnet_naming_symbols.parameters.applicable_kinds = parameter +dotnet_naming_symbols.parameters.applicable_accessibilities = * +dotnet_naming_symbols.parameters.required_modifiers = + +dotnet_naming_symbols.public_constant_fields.applicable_kinds = field +dotnet_naming_symbols.public_constant_fields.applicable_accessibilities = public, internal +dotnet_naming_symbols.public_constant_fields.required_modifiers = const + +dotnet_naming_symbols.public_static_readonly_fields.applicable_kinds = field +dotnet_naming_symbols.public_static_readonly_fields.applicable_accessibilities = public, internal +dotnet_naming_symbols.public_static_readonly_fields.required_modifiers = readonly, static + +dotnet_naming_symbols.private_static_readonly_fields.applicable_kinds = field +dotnet_naming_symbols.private_static_readonly_fields.applicable_accessibilities = private, protected, protected_internal, private_protected +dotnet_naming_symbols.private_static_readonly_fields.required_modifiers = readonly, static + +dotnet_naming_symbols.local_functions.applicable_kinds = local_function +dotnet_naming_symbols.local_functions.applicable_accessibilities = * +dotnet_naming_symbols.local_functions.required_modifiers = + +# Naming styles + +dotnet_naming_style.pascalcase.required_prefix = +dotnet_naming_style.pascalcase.required_suffix = +dotnet_naming_style.pascalcase.word_separator = +dotnet_naming_style.pascalcase.capitalization = pascal_case + +dotnet_naming_style.ipascalcase.required_prefix = I +dotnet_naming_style.ipascalcase.required_suffix = +dotnet_naming_style.ipascalcase.word_separator = +dotnet_naming_style.ipascalcase.capitalization = pascal_case + +dotnet_naming_style.tpascalcase.required_prefix = T +dotnet_naming_style.tpascalcase.required_suffix = +dotnet_naming_style.tpascalcase.word_separator = +dotnet_naming_style.tpascalcase.capitalization = pascal_case + +dotnet_naming_style._camelcase.required_prefix = _ +dotnet_naming_style._camelcase.required_suffix = +dotnet_naming_style._camelcase.word_separator = +dotnet_naming_style._camelcase.capitalization = camel_case + +dotnet_naming_style.camelcase.required_prefix = +dotnet_naming_style.camelcase.required_suffix = +dotnet_naming_style.camelcase.word_separator = +dotnet_naming_style.camelcase.capitalization = camel_case + +dotnet_naming_style.s_camelcase.required_prefix = s_ +dotnet_naming_style.s_camelcase.required_suffix = +dotnet_naming_style.s_camelcase.word_separator = +dotnet_naming_style.s_camelcase.capitalization = camel_case + diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 00000000..111d86d0 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,175 @@ +# Copilot Instructions for vizor-echarts + +## Project Overview +- **Purpose**: Blazor wrapper around Apache ECharts; main library targets .NET 10. +- **Structure**: src/Vizor.ECharts (core), src/Vizor.ECharts.Demo (Blazor server demo), src/Vizor.ECharts.Samples (area-based samples), src/Vizor.ECharts.Tests (unit tests via MSTest), src/Vizor.ECharts.BindingGenerator (code generation utility). +- **Documentation**: Detailed technical documentation is in the [doc/](doc/) folder, covering generator architecture, testing strategy, circular dependency solutions, memory profiling, and implementation guides. + +## External References +Official Apache ECharts documentation and resources: +- **Examples Gallery**: https://echarts.apache.org/examples/en/index.html - Official ECharts examples (translate JavaScript to C#) +- **Cheat Sheet**: https://echarts.apache.org/en/cheat-sheet.html - Quick reference for common patterns +- **Option Documentation**: https://echarts.apache.org/en/option.html - Complete API reference for chart options +- **Tutorial**: https://echarts.apache.org/en/tutorial.html - In-depth guides (e.g., Dataset usage) +- **Online Editor**: https://echarts.apache.org/examples/en/editor.html - Test ECharts code snippets before translating to C# + +## Core Architecture & Interop Flow + +### C# → JS Pipeline +[src/Vizor.ECharts/EChart.razor](src/Vizor.ECharts/EChart.razor) inherits from [src/Vizor.ECharts/EChartBase.cs](src/Vizor.ECharts/EChartBase.cs) and serializes `ChartOptions` to JSON, passing it via `IJSRuntime` interop to [src/Vizor.ECharts/Scripts/vizor-echarts.js](src/Vizor.ECharts/Scripts/vizor-echarts.js). JS functions called: `vizorECharts.initChart` (initial render), `updateChart` (options update), `attachClickEvent` (click handling). + +### Chart Options Model +- `ChartOptions` is a partial shell ([src/Vizor.ECharts/ChartOptions.cs](src/Vizor.ECharts/ChartOptions.cs)). +- Actual option/series types in [src/Vizor.ECharts/Options](src/Vizor.ECharts/Options) and [src/Vizor.ECharts/Series](src/Vizor.ECharts/Series). +- **Most files auto-generated** from ECharts option.json; preserve `[JsonPropertyName]` attributes and property naming conventions. + +### Series Typing & Polymorphic Serialization +- Each series implements `ISeries` interface (auto-generated in [src/Vizor.ECharts/Series/Generated/ISeries.cs](src/Vizor.ECharts/Series/Generated/ISeries.cs)). +- Uses **[.NET 10 polymorphic serialization](https://learn.microsoft.com/en-us/dotnet/standard/serialization/system-text-json/polymorphism)**: `[JsonPolymorphic(TypeDiscriminatorPropertyName = "type")]` on ISeries interface, with `[JsonDerivedType]` attributes for each series type (e.g., `LineSeries`, `BarSeries`). +- **No explicit Type property** in series classes—discriminator added automatically by serializer during JSON output. +- Same pattern applies to `IDataZoom` ([src/Vizor.ECharts/Options/DataZoom/Generated/IDataZoom.cs](src/Vizor.ECharts/Options/DataZoom/Generated/IDataZoom.cs)) with `InsideDataZoom` and `SliderDataZoom`. +- Polymorphic series data handled by [src/Vizor.ECharts/Types/SeriesDataConverterFactory.cs](src/Vizor.ECharts/Types/SeriesDataConverterFactory.cs). +- `SeriesData`, `SeriesData`, and `SeriesData` generics serialize correctly via factory pattern. + +## Data Loading Patterns + +### Server-side (C#) +Use the `DataLoader` callback parameter on `EChart` component—invoked during render to populate options asynchronously. + +### Browser-side (JS fetch) +Use `ExternalDataSource` ([src/Vizor.ECharts/Types/ExternalDataSource.cs](src/Vizor.ECharts/Types/ExternalDataSource.cs)) to define fetch URLs, optional path extraction, and `afterLoad` JS functions. **Inside options objects, reference via `ExternalDataSourceRef`** (not `ExternalDataSource`). Cached fetches accessible via `window.vizorECharts.getDataSource(fetchId)`. + +### JS Functions in Options +Wrap raw JavaScript as `JavascriptFunction` ([src/Vizor.ECharts/Types/JavascriptFunction.cs](src/Vizor.ECharts/Types/JavascriptFunction.cs)); converter outputs raw function text for JS `eval`. + +## Multi-Chart Coordination +Use `ChartGroup` ([src/Vizor.ECharts/ChartGroup.cs](src/Vizor.ECharts/ChartGroup.cs)) to synchronize updates across multiple charts via `UpdateAsync`. + +## JSON Serialization & Performance +- **Cached serializer options by default** (`CacheJsonSerializerOptions=true`); reuse across all charts for memory efficiency (see Meziantou post linked in EChartBase comments). +- camelCase JSON convention via shared serializer. +- Custom `JsonConverters` parameter: use consistently or disable caching. + +## Diagnostic Report & Pattern Analysis + +The generator produces **TypePatternAnalysisReport.md** showing type mapping coverage: + +### How to Access +- **Location**: `src/Vizor.ECharts.BindingGenerator/` (same directory as `typeinfo.txt`) +- **Triggered**: Automatically generated when running either: + - `dotnet run -- option-binding --input --output src/Vizor.ECharts` + - `dotnet run -- typeinfo --input ` + +### Report Contents +``` +# Type Pattern Analysis Report +Generated: 2026-01-04 + +## Summary +- Total properties analyzed: 37,348 +- ✅ Fully supported: 37,330 (99.95%) +- ⚠️ Partially supported: 2 (0.01%) +- ❌ Unsupported: 16 (0.04%) +- 🔍 Requires investigation: 0 (0%) + +## Unsupported Patterns +[Details on which properties fall back to object/string] +[Sorted by frequency and impact] +``` + +### Using Report for Phase 4 (Close Gaps) +- Review unsupported patterns to prioritize next custom types +- High-frequency patterns get implementation priority +- Report tracks progress across generator runs + +## Build & Test Workflows + +### .NET Build & Run +- **Build all**: `dotnet build src/Vizor.ECharts.Demo.sln` +- **Run demo**: `dotnet run --project src/Vizor.ECharts.Demo/Vizor.ECharts.Demo.csproj` +- **Run tests**: `dotnet test --project src/Vizor.ECharts.Tests/Vizor.ECharts.Tests.csproj` (MSTest framework) +- **Pack NuGet**: `dotnet pack -c Release` (Release required; fails in Debug via csproj target). Package includes README and wwwroot assets. + +### JS Build & Development +In `src/Vizor.ECharts`: +- `npm install` → install echarts & gulp toolchain +- `gulp` (or `gulp buildJs`) → minify vizor-echarts.js to wwwroot/js +- `gulp buildJsBundle` → bundle echarts + echarts-stat + vizor-echarts +- `gulp clean` → remove output files +Bundled JS (`vizor-echarts-bundle.js`) ships with package for no-dependency deployments. + +### Debug Logging +DEBUG builds auto-enable `vizorECharts.changeLogging(true)`, logging serialized options & fetches to console. Use browser DevTools to inspect actual data sent/received. + +## Resource Lifecycle +- **`DisposeAsync`** on `EChartBase`: removes from groups, clears cached serializer, calls `vizorECharts.disposeChart` (drops cached external data). +- **`ClearAsync`**: reset chart without disposing. + +## Code Generation & Option.json Upgrades + +**Rarely rerun generator.** Only when upgrading ECharts major version: +1. Build echarts-doc repo (`npm run build` → generates option.json). +2. Delete `src/Vizor.ECharts/Options/Generated` and `src/Vizor.ECharts/Series/Generated` folders. +3. Run: `dotnet run --project src/Vizor.ECharts.BindingGenerator -- option-binding --input --output src/Vizor.ECharts` +4. **Diagnostic Report Generated**: `TypePatternAnalysisReport.md` is automatically created in the BindingGenerator directory (same location as `typeinfo.txt`), showing type mapping coverage and unsupported patterns. +5. **Polymorphic interfaces auto-generated**: Generator creates `ISeries.cs` and `IDataZoom.cs` in their respective Generated folders with .NET 10 `[JsonPolymorphic]`/`[JsonDerivedType]` attributes. Discriminators extracted from type property defaults in option.json. +6. Fix any compile errors (generator isn't 100% perfect). +7. **Hand-tuned overrides remain unchanged**: Files like `Series/Sankey/SankeySeriesLevel.cs` (outside Generated folders) are manually maintained and will NOT be regenerated. These are intentional architectural customizations. +8. Verify hand-tuned files still compile against newly generated types. Update manually if needed. + +**Option.json Locations**: +- **Current version (5.6.0)**: [src/Vizor.ECharts.BindingGenerator/echart-options/5.6.0/option.json](src/Vizor.ECharts.BindingGenerator/echart-options/5.6.0/option.json) +- **Future version (6.0.0)**: Will be added to `src/Vizor.ECharts.BindingGenerator/echart-options/6.0.0/option.json` when upgrading +- **Source**: Generated from https://github.com/apache/echarts-doc repository by running `npm run build` +- **Version tracking**: Generator automatically extracts version from input path (e.g., "5.6.0" from "echart-options/5.6.0/option.json") and includes it in generated file headers + +See [src/Vizor.ECharts.BindingGenerator/Readme.md](src/Vizor.ECharts.BindingGenerator/Readme.md) for details on identifying and maintaining hand-tuned files. + +## Hand-Tuned Overrides Pattern + +Some generated types are intentionally customized and maintained outside the Generated folders: + +### Structure +- **Auto-generated**: `Series/Generated/Sankey/SankeySeriesLevels.cs` (in Generated subfolder, has "AUTO GENERATED" header) +- **Hand-tuned**: `Series/Sankey/SankeySeriesLevel.cs` (outside Generated, manually maintained, typically partial class) + +### How to Identify +- Files WITH `// AUTO GENERATED - DO NOT EDIT` header in `Options/Generated/` or `Series/Generated/` → regenerated automatically +- Files WITHOUT header, located outside Generated folders → hand-maintained overrides + +### When Hand-Tuning is Necessary +- API improvements or naming changes (e.g., singular vs. plural for clarity) +- Custom type conversions or serialization logic +- Architectural customizations that differ from option.json + +### Maintenance Requirement +- Hand-tuned files are **NOT automatically updated** by the generator +- Must manually update when underlying generated types change +- Verify compilation after running generator on new option.json +Global enum mappings in [src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs](src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs) `AddMappedEnumType` calls. When a JSON property name maps to multiple possible enums (e.g., `"type"` can be `LineType` or `LegendType` depending on parent object), specify parent type as context: `AddMappedEnumType(new(...), "lineStyle")`. + +## Testing Patterns +- Snapshot tests in [src/Vizor.ECharts.Tests/Unit/Serialization](src/Vizor.ECharts.Tests/Unit/Serialization). +- Use `ChartOptionsBuilder` helpers and `SnapshotHelper.AssertJsonSnapshot` for serialization validation. +- Test custom converters in Converters/ subfolder. + +## Key Conventions +- **One `ExternalDataSource` per chart** (avoid static instances). +- **Render mode** defaults to SVG; set `Renderer = ChartRenderer.Canvas` if needed. +- **Theme** optional; null renders with default theme. +- **Click events** attached via `vizorECharts.attachClickEvent` → calls `HandleChartClick` on component. +- **Interop contract**: JS expects JSON strings for options/maps/fetchOpts. Null options show loading spinner only. + +## Additional Documentation +For detailed technical documentation, see files in the [doc/](doc/) folder: +- **Circular_Dependency_Solutions.md** - Generator ↔ Vizor.ECharts circular dependency discussion and future abstractions layer plan +- **Generator_Implementation_Guide.md** - Code examples for generator improvements +- **Generator_Improvement_Plan.md** - Detailed specification for type mapping improvements +- **GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md** - High-level generator improvement overview +- **Manual_Implementation_Analysis.md** - Analysis of existing type patterns +- **Testing_Strategy.md** - Test infrastructure and patterns +- **Memory_Profiling.md** - Performance optimization guidance +- **Node_Build_Toolchain.md** - JS build process documentation +- **VizorECharts_JS_Interop.md** - JavaScript interop architecture + +Feel free to propose additions if key workflows or patterns are missing. diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 00000000..32e9cd60 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,63 @@ +name: Build & Pack + +on: + push: + branches: [ dev ] + pull_request: + branches: [ dev ] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup .NET + uses: actions/setup-dotnet@v5 + with: + global-json-file: './global.json' + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + + - name: Restore .NET dependencies + run: dotnet restore src/Vizor.ECharts.Demo.sln + + - name: Build .NET + run: dotnet build src/Vizor.ECharts.Demo.sln --no-restore --configuration Debug + + - name: Test .NET + run: dotnet test --project src/Vizor.ECharts.Tests/Vizor.ECharts.Tests.csproj --no-build --configuration Debug --report-trx --results-directory ./artifacts/test-results + + - name: Install npm dependencies + run: npm install + working-directory: src/Vizor.ECharts + + - name: Build JS bundle with Gulp + run: npx gulp + working-directory: src/Vizor.ECharts + + - name: Pack NuGet (Release) + run: dotnet pack -c Release src/Vizor.ECharts/Vizor.ECharts.csproj + + - name: Upload NuGet artifact + uses: actions/upload-artifact@v4 + with: + name: nuget-package + path: src/Vizor.ECharts/bin/Release/**/*.nupkg + + - name: Upload test results + if: always() + uses: actions/upload-artifact@v4 + with: + name: test-results + path: artifacts/test-results + + - name: Upload JS artifacts + uses: actions/upload-artifact@v4 + with: + name: js-bundle + path: src/Vizor.ECharts/wwwroot/js/*.js \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5a2bfd4c..4c1c9d79 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ x64/ node_modules/ .vs/ /src/Vizor.ECharts/package-lock.json +/src/Vizor.EChartsGen/ \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..70481099 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,42 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "BindingGenerator: option-binding", + "type": "coreclr", + "request": "launch", + "preLaunchTask": "build-generator", + "program": "${workspaceFolder}/src/Vizor.ECharts.BindingGenerator/bin/Debug/net10.0/Vizor.ECharts.BindingGenerator.dll", + "args": [ + "option-binding", + "--input", + "${workspaceFolder}/src/Vizor.ECharts.BindingGenerator/echart-options/5.6.0/option.json", + "--output", + "${workspaceFolder}/src/Vizor.EChartsGen" + ], + "cwd": "${workspaceFolder}/src/Vizor.ECharts.BindingGenerator", + "stopAtEntry": false, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + }, + { + "name": "BindingGenerator: typeinfo", + "type": "coreclr", + "request": "launch", + "preLaunchTask": "build-generator", + "program": "${workspaceFolder}/src/Vizor.ECharts.BindingGenerator/bin/Debug/net10.0/Vizor.ECharts.BindingGenerator.dll", + "args": [ + "typeinfo", + "--input", + "echart-options/5.6.0/option.json" + ], + "cwd": "${workspaceFolder}/src/Vizor.ECharts.BindingGenerator", + "stopAtEntry": false, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + } + ] +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 00000000..4a980abe --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,58 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "build-generator", + "command": "dotnet", + "type": "shell", + "args": [ + "build", + "--configuration", + "Debug", + "${workspaceFolder}/src/Vizor.ECharts.BindingGenerator/Vizor.ECharts.BindingGenerator.csproj" + ], + "group": { + "kind": "build", + "isDefault": false + }, + "problemMatcher": "$msCompile", + "presentation": { + "reveal": "silent", + "panel": "shared" + } + }, + { + "label": "build-solution", + "command": "dotnet", + "type": "shell", + "args": [ + "build", + "${workspaceFolder}/src/Vizor.ECharts.Demo.sln" + ], + "group": { + "kind": "build", + "isDefault": true + }, + "problemMatcher": "$msCompile" + }, + { + "label": "run-tests", + "command": "dotnet", + "type": "shell", + "args": [ + "test", + "--project", + "${workspaceFolder}/src/Vizor.ECharts.Tests/Vizor.ECharts.Tests.csproj" + ], + "group": { + "kind": "test", + "isDefault": true + }, + "problemMatcher": "$msCompile", + "presentation": { + "reveal": "always", + "panel": "shared" + } + } + ] +} diff --git a/Directory.Build.props b/Directory.Build.props new file mode 100644 index 00000000..41dd78be --- /dev/null +++ b/Directory.Build.props @@ -0,0 +1,9 @@ + + + latest + enable + enable + true + false + + diff --git a/GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md b/GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md new file mode 100644 index 00000000..3d5227b3 --- /dev/null +++ b/GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md @@ -0,0 +1,212 @@ +# Generator Improvement Plan - Executive Summary + +## Implementation Status + +**Phase 1-3: ✅ COMPLETE** - Foundation infrastructure, polymorphic serialization, and diagnostic reporting implemented +**Phase 4: 🟡 PARTIAL** - ~20 custom types exist, 101 TODOs remain; remaining type gaps require individual implementation + +## Problem Statement + +The BindingGenerator originally had **scattered diagnostics** and **unmapped type patterns** that fall back to `object` or `string`. Phases 1-2 have addressed the core infrastructure: + +- ✅ **IMPLEMENTED**: DiagnosticCollector for aggregating type mapping diagnostics +- ✅ **IMPLEMENTED**: TypePatternRegistry with 20+ supported patterns +- ✅ **IMPLEMENTED**: Polymorphic serialization for ISeries (22 types) and IDataZoom (2 types) +- ✅ **IMPLEMENTED**: Version tracking in generated file headers +- ✅ **IMPLEMENTED**: Diagnostic report generation (TypePatternAnalysisReport.md) +- ⚠️ Still have ~101 TODO markers in generated code for Phase 4 implementation + +## Solution Overview + +A **4-phase improvement plan** to create a **diagnostic-driven, registry-based** type mapping system: + +``` +Current (Chaotic) → Improved (Clear & Extensible) +├─ Warnings in console ├─ DiagnosticCollector +├─ Scattered case statements ├─ TypePatternRegistry +├─ Object fallbacks ├─ Structured Reports +└─ Hard to maintain └─ Easy to extend +``` + +## Key Deliverables + +| Phase | Status | Deliverable | Implementation Notes | +|-------|--------|------------|---------------------| +| **1: Foundation** | ✅ COMPLETE | Diagnostic infrastructure (3 new classes) | DiagnosticCollector, TypePatternRegistry, TypeMappingDiagnostic implemented | +| **2: Polymorphic** | ✅ COMPLETE | ISeries & IDataZoom auto-generation | PolymorphicInterfaceGenerator, version tracking, 24 derived types | +| **3: Analysis** | ✅ COMPLETE | Auto-generated pattern report | DiagnosticCollector generates TypePatternAnalysisReport.md; 99.95% coverage | +| **4: Close Gaps** | 🟡 PARTIAL | New custom types for patterns | ~20 custom types exist, 101 TODOs remain | + +## Concrete Examples + +### Before: Messy Diagnostics +``` +[Console output - lost] +WARNING: enum type 'type' in 'crossStyle' with values 'solid,dashed,dotted' is not mapped +ERROR: Failed to map property 'type' in type 'crossStyle' with types 'array,enum,number' + +[Generated code] +//TODO: Type Warning: array,enum,number type 'type' in 'crossStyle' is not mapped +public object? Type { get; set; } +``` + +### After: Clear Tracking +``` +[DiagnosticReport.md - generated] +### array,enum,number (5 occurrences) +Examples: CrossStyle.type, ... +Suggestion: Create EnumOrNumberArray custom type +Effort: 2-3 hours +Priority: High + +[Generated code] +[JsonPropertyName("type")] +public EnumOrNumberArray? Type { get; set; } // ← Strong type! +``` + +## Current Architecture (Implemented) + +``` +TypePatternRegistry (✅ COMPLETE) DiagnosticCollector (✅ COMPLETE) + ├─ Primitive types ├─ Records all decisions + ├─ 20+ Supported patterns ├─ Groups by pattern + ├─ Partially supported ├─ Ready for report generation + └─ Truly unsupported └─ Tracks progress + + ↑ ↑ + └────────────┬─────────────────────┘ + │ + BasePhase MapType() + (uses registry, records diagnostics) + │ + ↓ + ┌──────────────┴──────────────┐ + │ │ +PolymorphicInterfaceGenerator ObjectTypeClassGenerator +(✅ ISeries, IDataZoom) (✅ Version headers) + │ │ + └──────────────┬──────────────┘ + ↓ + Generated code with: + • Strong types (20+ patterns) + • Version headers + • 101 TODOs (future work) +``` + +## Success Metrics + +| Metric | Current | Target | When | +|--------|---------|--------|------| +| Diagnostic tracking | ❌ Console (lost) | ✅ Report-based | ✅ COMPLETE | +| Code clarity (MapType) | ❌ 100+ complex lines | ✅ 60 lines, clear steps | Week 2 | +| Generator maintainability | ❌ Pattern scattered | ✅ Centralized registry | Week 1 | +| Unsupported patterns | ~12 | ~3-5 (acceptable) | Week 4 | +| Developers time to add pattern | ~30 min | ~10 min | Week 4 | + +## Risk & Mitigation + +| Risk | Mitigation | +|------|-----------| +| Refactoring breaks generation | Comprehensive tests before changes; keep fallback logic | +| Report shows more problems | Analysis data drives prioritization; not a blocker | +| Low adoption of new system | Clear guide + documentation; examples in code | + +## Next Steps + +1. ✅ **Approve plan** (this document) +2. 📋 **Start Phase 1** (Create diagnostic classes) +3. 🔄 **Weekly sync** on progress + learnings +4. 📊 **Generate report** (Week 3) - decide on custom type priorities +5. 🎯 **Close gaps** (Week 4) - implement high-impact patterns + +## Files Created by This Plan + +**Documentation** (this initiative): +- `doc/Generator_Improvement_Plan.md` (detailed specification) +- `doc/Generator_Improvement_Summary.md` (visual overview) +- `doc/Generator_Implementation_Guide.md` (code examples + how-to) +- `doc/TypePatternAnalysisReport.md` (auto-generated, Week 3) + +**Code** (to be implemented): +- `src/Vizor.ECharts.BindingGenerator/Diagnostics/TypeMappingDiagnostic.cs` +- `src/Vizor.ECharts.BindingGenerator/Diagnostics/DiagnosticCollector.cs` +- `src/Vizor.ECharts.BindingGenerator/Types/TypePatternRegistry.cs` +- `src/Vizor.ECharts.Tests/Unit/Generator/TypePatternAnalysisTests.cs` (NEW) +- `src/Vizor.ECharts.Tests/Unit/Generator/DiagnosticCollectorTests.cs` (NEW) +- **Refactored**: `src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs` + +## Appendix: Example Report (Expected Output) + +```markdown +# Type Pattern Analysis Report +Generated: 2025-12-31 + +## Summary +- Total properties analyzed: 1,247 +- ✅ Fully supported: 1,195 (95.8%) +- ⚠️ Partially supported: 32 (2.6%) +- ❌ Unsupported: 15 (1.2%) +- 🔍 Requires investigation: 5 (0.4%) + +## Top Unsupported Patterns (Sorted by Impact) + +### 1. array,enum,number (5 properties) +**Current**: Falls to `object?` +**Priority**: HIGH - Blocks crossStyle rendering +**Solution**: Create `EnumOrNumberArray` +**Examples**: CrossStyle.type, ParallelSeriesData.type + +### 2. boolean,object (3 properties) +**Current**: Falls to `object?` +**Priority**: MEDIUM - Rare pattern +**Solution**: Keep as object? with typed accessors +**Examples**: ScatterSeries.symbolKeepAspect + +### 3. date,number,string (2 properties) +**Current**: Falls to `NumberOrString` +**Priority**: LOW - Implicit datetime support works +**Status**: ACCEPTABLE (existing solution works) + +## Recommendations +1. ✅ Implement `EnumOrNumberArray` (high impact) +2. ✅ Add 3 missing enum mappings (low effort, high value) +3. ✅ Document 5 "truly unsupported" patterns for typed accessor pattern +4. 📋 Investigate 3 edge cases (schedule for next release) + +## All Patterns by Category +[Comprehensive table with 200+ rows...] +``` + +--- + +## Questions & Answers + +**Q: Why not just make everything `object`?** +A: Type safety is the value prop. Users lose intellisense/compile-time checking. This plan recovers ~95% type coverage. + +**Q: How long does Phase 1 take?** +A: 2-3 days to create diagnostic infrastructure. Zero risk since it's purely additive. + +**Q: What if there are too many unsupported patterns?** +A: The analysis (Week 3) will tell us. If >5%, we prioritize by usage frequency. Typed accessor pattern is always a fallback. + +**Q: Can we do this incrementally?** +A: Yes! Each phase is independent: +- Phase 1 can run without Phase 2 (diagnostics-only mode) +- Phase 2 improves code but doesn't break anything (old fallback logic preserved) +- Phase 3 is pure analysis (no code generation changes) +- Phase 4 is incremental (add 1 custom type at a time) + +**Q: Who benefits?** +- **Developers**: Clearer error messages, extensible system +- **Users**: Better type safety in generated code +- **Maintainers**: 10x easier to understand generator logic + +--- + +## Related Documents + +- [Generator_Improvement_Plan.md](Generator_Improvement_Plan.md) - Detailed technical specification +- [Generator_Improvement_Summary.md](Generator_Improvement_Summary.md) - Visual flowcharts and timeline +- [Generator_Implementation_Guide.md](Generator_Implementation_Guide.md) - Complete code examples +- [Manual_Implementation_Analysis.md](Manual_Implementation_Analysis.md) - Existing patterns baseline diff --git a/IMPROVEMENTS.md b/IMPROVEMENTS.md new file mode 100644 index 00000000..fd37b96f --- /dev/null +++ b/IMPROVEMENTS.md @@ -0,0 +1,153 @@ +# Vizor.ECharts Improvement Plan + +Collected improvement suggestions for future iterations. Organized by category with rationale and estimated impact. + +## CI/CD & Build Automation + +### Add GitHub Actions workflow +- **What**: Create `.github/workflows/` to run `dotnet build`, `dotnet pack -c Release`, and `npm install && gulp` on push/PR +- **Why**: Catch pack-mode failures early, ensure JS bundle stays in sync with C# changes, validate Release configuration works +- **Impact**: High (prevents build/deployment surprises) +- **Effort**: Medium (1–2 hours) + +### Publish build artifacts +- **What**: Archive NuGet package and bundled JS artifacts in CI +- **Why**: Enable quick inspection of generated outputs, facilitate prerelease testing +- **Impact**: Medium (improves debug workflow) +- **Effort**: Low (30 mins) + +--- + +## Testing & Quality + +### Add component/integration tests for EChart interop +- **What**: Test `EChartBase` serialization paths, `ExternalDataSourceRef` resolution, JS invocation contract, and click event flow +- **Why**: Prevent regressions in options serialization, external data fetching, and Blazor↔JS boundary +- **Impact**: High (reduces maintenance burden over time) +- **Effort**: Medium–High (4–6 hours initial setup, ongoing) +- **Files to focus on**: + - [src/Vizor.ECharts/EChartBase.cs](src/Vizor.ECharts/EChartBase.cs) (serialization, lifecycle) + - [src/Vizor.ECharts/Types/SeriesDataConverterFactory.cs](src/Vizor.ECharts/Types/SeriesDataConverterFactory.cs) (polymorphic data) + - [src/Vizor.ECharts/Scripts/vizor-echarts.js](src/Vizor.ECharts/Scripts/vizor-echarts.js) (initChart, updateChart, fetchExternalData) + +--- + +## Build Quality + +### ✅ DONE: JavaScript code quality modernization +- **What**: Modernized [src/Vizor.ECharts/Scripts/vizor-echarts.js](src/Vizor.ECharts/Scripts/vizor-echarts.js) to ES6+ standards +- **Completed**: + - All `var` → `const`/`let` with proper reassignment detection + - All `==`/`!=` → `===`/`!==` (strict equality) + - Fixed critical bug: undefined `url` variable → `item.url` + - ES6 method shorthand for all object methods + - Arrow functions for callbacks + - Template literals for string interpolation + - Fixed memory leak: Added resize listener cleanup in `disposeChart()` + - Added proper error handling with try-catch +- **Impact**: High (fixes memory leak, improves code quality and maintainability) +- **Browser target**: Modern browsers only (2017+; no IE11 without transpilation) + +### Fix BL0005 warnings in sample files +- **What**: Address 3 compiler warnings in [src/Vizor.ECharts.Samples/Areas/Geo/UsaGeoMap.razor](src/Vizor.ECharts.Samples/Areas/Geo/UsaGeoMap.razor) (lines 197, 199) and [src/Vizor.ECharts.Samples/Areas/Misc/ParameterSetSampleChart.razor](src/Vizor.ECharts.Samples/Areas/Misc/ParameterSetSampleChart.razor) (line 83) about setting component parameter `Options` outside its component +- **Why**: Ensure clean build with zero warnings; clarify intent (intentional demo vs. anti-pattern) +- **Impact**: Low (quality signal) +- **Effort**: Low (30 mins) +- **Options**: + 1. Create local copy before mutation: `var localOptions = new ChartOptions { ... }; options = localOptions;` + 2. Add `@* BL0005 *@` suppression if these are intentional test cases demonstrating the capability +- **Note**: Review intent of each file before fixing; may be deliberate examples + +--- + +## Code Maintenance + +### Modernize JS interop to ES6 modules +- **What**: Refactor [src/Vizor.ECharts/Scripts/vizor-echarts.js](src/Vizor.ECharts/Scripts/vizor-echarts.js) to use ES6 module exports; update [src/Vizor.ECharts/EChartBase.cs](src/Vizor.ECharts/EChartBase.cs) to use `IJSRuntime.InvokeAsync("import", "...")` pattern +- **Why**: Eliminate global `window.vizorECharts` namespace pollution; align with .NET 10 best practices; enable better tree-shaking and bundling +- **Impact**: Medium (cleaner architecture, follows modern conventions) +- **Effort**: Medium (2–3 hours: refactor JS exports, update C# import calls, test all chart types) +- **Steps**: + 1. Convert `vizor-echarts.js` to named exports (`export function initChart(...)`, etc.) + 2. Update `EChartBase.cs` to cache and reuse the module reference + 3. Update gulp bundling to preserve ES6 syntax + 4. Test with all demo/sample charts +- **Note**: Backwards compatible refactoring; no API changes needed + +### Enforce generated-code boundaries +- **What**: Document that [src/Vizor.ECharts/Options](src/Vizor.ECharts/Options) and [src/Vizor.ECharts/Series](src/Vizor.ECharts/Series) are auto-generated; add regen checklist and helper script +- **Why**: Clarify that hand-edits in these folders may be lost on regeneration; streamline upgrade flow +- **Impact**: Medium (reduces confusion, guides future upgrades) +- **Effort**: Low (1 hour) +- **Outputs**: + - Update [src/Vizor.ECharts.BindingGenerator/Readme.md](src/Vizor.ECharts.BindingGenerator/Readme.md) with upgrade steps + - Create or enhance `scripts/regen-bindings.sh` (or PowerShell equivalent) + - Add `.gitignore` pattern for regeneration artifacts + +### Add .editorconfig for JS/TS +- **What**: Extend existing `.editorconfig` to cover `*.js` formatting (indentation, EOL, charset) +- **Why**: Reduce diffs and inconsistency in [src/Vizor.ECharts/Scripts/vizor-echarts.js](src/Vizor.ECharts/Scripts/vizor-echarts.js) before gulp bundling +- **Impact**: Low (quality-of-life) +- **Effort**: Low (30 mins) + +--- + +## Developer Experience & Documentation + +### Create minimal "hello chart" template +- **What**: Add a quick-start example or sample in [src/Vizor.ECharts.Samples](src/Vizor.ECharts.Samples) or README showing bare-minimum chart setup +- **Why**: Reduce time-to-first-chart, complement existing detailed samples +- **Impact**: Medium (improves onboarding) +- **Effort**: Low (1 hour) + +### Document common pitfalls +- **What**: Add "FAQ" or "Common Pitfalls" section to README covering: + - `ExternalDataSource` cannot be used inside options; use `ExternalDataSourceRef` instead + - `dotnet pack` only works in Release configuration + - Use `ChartGroup` for batch updating multiple charts + - One `ExternalDataSource` instance per chart (do not reuse static instances) +- **Why**: Reduce support burden and debugging time for users +- **Impact**: Medium (self-serve troubleshooting) +- **Effort**: Low (1 hour) + +### Expand Copilot instructions +- **What**: Update [.github/copilot-instructions.md](.github/copilot-instructions.md) with more examples or links to sample code +- **Why**: Help AI agents (and humans) quickly understand patterns +- **Impact**: Low (local benefit) +- **Effort**: Low (30 mins) + +--- + +## Diagnostics & Debugging + +### Add diagnostics pane (future) +- **What**: Optional UI component or debug overlay showing: + - Serialized `chartOpts`, `mapOpts`, `fetchOpts` JSON + - Cached fetch IDs and their data + - Last initialization/update timestamps +- **Why**: Enable faster debugging without relying solely on console logs +- **Impact**: Medium (improves development experience) +- **Effort**: Medium–High (3–4 hours, may require demo refactoring) +- **Note**: Lower priority; consider after higher-impact items + +--- + +## Priority Ranking + +1. **High** (do first): CI/CD workflow, generated-code boundaries, common pitfalls doc +2. **Medium** (do soon): Component/integration tests, hello-chart template, .editorconfig for JS +3. **Low** (nice-to-have): Diagnostics pane, expanded Copilot instructions + +--- + +## Tracking Template + +When starting work, copy the relevant section and update with: + +``` +- [ ] Task description + - **Start**: YYYY-MM-DD + - **Status**: In Progress / Done + - **PR/Branch**: (if applicable) + - **Notes**: Any blockers or decisions +``` diff --git a/README.md b/README.md index 3ec17a57..c29dc351 100644 --- a/README.md +++ b/README.md @@ -254,4 +254,11 @@ See [full example](https://github.com/datahint-eu/vizor-echarts/blob/main/src/Vi See [Issues](https://github.com/datahint-eu/vizor-echarts/issues) for a list of open tasks/bugs. -Please provide a runnable sample using the [ECharts Online Editor](https://echarts.apache.org/examples/en/editor.html) and a description of what is wrong with the C# mapping. \ No newline at end of file +Please provide a runnable sample using the [ECharts Online Editor](https://echarts.apache.org/examples/en/editor.html) and a description of what is wrong with the C# mapping. + +# Project Lineage & Branching + +- **Upstream**: This repository began as a fork of the original Vizor.ECharts project (now inactive). That upstream state is retained for reference only. +- **Active branch**: `dev` contains the maintained code. Plan: promote `dev` to the primary `main` branch after detaching from the fork (no upstream updates expected). +- **Releases**: Build and pack from the active branch (currently `dev`; will move to `main` after the promotion step). +- **Contributions**: Open pull requests against the active branch; avoid reviving the upstream fork since it is unmaintained. \ No newline at end of file diff --git a/TypePatternAnalysisReport.md b/TypePatternAnalysisReport.md new file mode 100644 index 00000000..a09ced35 --- /dev/null +++ b/TypePatternAnalysisReport.md @@ -0,0 +1,54 @@ +# Type Pattern Analysis Report +Generated: 2026-01-11 19:10:00 + +## Summary +- Total properties analyzed: 37348 +- ✅ Fully supported: 37330 (100%) +- ⚠️ Partially supported: 2 (0%) +- ❌ Unsupported: 16 (0%) +- 🔍 Requires investigation: 0 (0%) + +## Unsupported Patterns (Sorted by Frequency) + +### array,enum,number (4 occurrences) +**Examples**: crossStyle.type, crossStyle.type, crossStyle.type +**Suggestion**: Pattern 'array,enum,number' is complex - investigate if typed accessor pattern is appropriate + +### color,number (3 occurrences) +**Examples**: itemStyle.borderColorSaturation, itemStyle.borderColorSaturation, itemStyle.borderColorSaturation +**Suggestion**: Create custom union type: ColorOrNumber (see NumberOrString pattern for template) + +### array,enum (2 occurrences) +**Examples**: dayLabel.nameMap, monthLabel.nameMap +**Suggestion**: Create custom union type: ArrayOrEnum (see NumberOrString pattern for template) + +### number,percentvector,string (2 occurrences) +**Examples**: PictorialBarSeries.symbolMargin, PictorialBarSeriesData.symbolMargin +**Suggestion**: Pattern 'number,percentvector,string' is complex - investigate if typed accessor pattern is appropriate + +### *,number (1 occurrences) +**Examples**: PiecewiseVisualMap.itemGap +**Suggestion**: Investigate if a custom type is needed + +### function,htmlelement,string (1 occurrences) +**Examples**: tooltip.appendTo +**Suggestion**: Pattern 'function,htmlelement,string' is complex - investigate if typed accessor pattern is appropriate + +### array,object (1 occurrences) +**Examples**: dataset.source +**Suggestion**: Create custom union type: ArrayOrObject (see NumberOrString pattern for template) + +### enum,number (1 occurrences) +**Examples**: areaStyle.origin +**Suggestion**: Create custom union type: EnumOrNumber (see NumberOrString pattern for template) + +### boolean,object (1 occurrences) +**Examples**: PieSeries.emptyCircleStyle +**Suggestion**: Create custom union type: BooleanOrObject (see NumberOrString pattern for template) + +## Partially Supported Patterns (Typed Accessor Pattern) + +### enum,function (2 occurrences) +**Pattern**: object? with typed accessors +**Examples**: SunburstSeries.sort, FunnelSeries.sort + diff --git a/doc/Circular_Dependency_Solutions.md b/doc/Circular_Dependency_Solutions.md new file mode 100644 index 00000000..4fb6f408 --- /dev/null +++ b/doc/Circular_Dependency_Solutions.md @@ -0,0 +1,195 @@ +# Circular Dependency Solutions: Generator ↔ Vizor.ECharts + +## Problem +The Generator project references Vizor.ECharts types (like `Detail`, `ChartOptions`), but Vizor.ECharts needs the Generator to create these types. This creates a circular dependency that prevents: +- Deleting generated files for clean regeneration +- Building the generator independently +- Running the generator as part of the build + +## Current Solution (#3): Conditional Compilation (REVISED) +**Status**: CHALLENGING - SEE BELOW + +Attempted approach: Use a `GENERATOR_BUILD` configuration flag to conditionally exclude generated files when the generator itself builds. + +### Why This Doesn't Work: +- Generator needs `typeof()` references to hand-coded utility types: `Color`, `NumberOrString`, `JavascriptFunction`, etc. +- Cannot exclude generated files globally - hand-coded Series classes reference generated types (e.g., `Emphasis`, `Blur`, `Select`, `Label`) +- Some files in folders like `Series/Sankey/` are intentionally hand-tuned overrides (e.g., `SankeySeriesLevel.cs`) - these reference generated types and are maintained manually +- Excluding by glob pattern `Series/Generated/**/*.cs` is not sufficient + +### Why This Won't Work Even With More Specific Exclusions: +The core issue isn't about file location—it's that: +1. Hand-coded `SankeySeriesLevel.cs` references generated `Blur`, `Select`, `Emphasis` +2. Generator needs `typeof(Color)`, `typeof(NumberOrString)` to compile +3. These types come from Vizor.ECharts project +4. Creating "stubs" requires knowing exact signatures of generated types + +**Verdict**: #3 alone is insufficient. Need #5 or #6 first. + +--- + +## Future Solution (#6): Abstractions Assembly +**Status**: PLANNED FOR FUTURE + +Create a lightweight abstractions layer that breaks the circular dependency architecturally. + +### Architecture: +``` +Vizor.ECharts.Abstractions (no dependencies) +├── ISeries interface (currently auto-generated in Series/Generated/ISeries.cs) +├── IDataZoom interface (currently auto-generated in Options/DataZoom/Generated/IDataZoom.cs) +├── Color, NumberOrString, JavascriptFunction types +└── Other core utility types + +Vizor.ECharts.BindingGenerator → references Abstractions only +├── Generates code against Abstractions types +└── No dependency on generated Vizor.ECharts files + +Vizor.ECharts → references Abstractions +├── Includes Abstractions types +├── Includes generated types +└── Clean build possible at any time +``` + +**Note**: ISeries and IDataZoom are currently auto-generated by PolymorphicInterfaceGenerator with .NET 10 `[JsonPolymorphic]`/`[JsonDerivedType]` attributes. If implementing abstractions layer, these would need to be moved to the abstractions assembly and the generator updated to reference them instead of generating them. + +### Implementation Steps: +1. Create `src/Vizor.ECharts.Abstractions/Vizor.ECharts.Abstractions.csproj` + - No NuGet dependencies + - `net10.0` + +2. Move core types to Abstractions: + - `ISeries`, `IDataZoom` interfaces (currently auto-generated with `[JsonPolymorphic]`/`[JsonDerivedType]` attributes) + - `Color`, `NumberOrString` types + - `JavascriptFunction`, `StringOrFunction` types + - `SeriesData`, `SeriesData`, etc. generics + - Other fundamental utility types + + **Important**: ISeries and IDataZoom are currently auto-generated by PolymorphicInterfaceGenerator. Moving them to abstractions would require: + - Hand-coding them in abstractions with polymorphic attributes + - Removing PolymorphicInterfaceGenerator from the generation process + - Ensuring discriminators stay in sync with option.json + +3. Update Generator to reference Abstractions: + - Remove reference to Vizor.ECharts + - Add reference to Vizor.ECharts.Abstractions + - Update type mappings to use Abstractions types + +4. Update Vizor.ECharts to reference Abstractions: + - Add `` to Abstractions + - Make Abstractions types public (re-export if needed) + - Generated types inherit/use Abstractions types + +5. NuGet packaging: + - Abstractions packaged separately (lightweight dependency) + - Main package includes both Abstractions + generated types + +**Pros**: Architecturally clean, zero coupling, enables independent tooling +**Cons**: Requires refactoring, more projects to maintain + +--- + +## Future Solution (#4): Standalone dotnet Tool +**Status**: LONG-TERM GOAL + +Publish the generator as a standalone `dotnet` global or local tool for complete decoupling. + +### Architecture: +``` +vizor-echarts-gen (standalone tool) +├── No reference to Vizor.ECharts +├── Takes option.json path as input +├── Generates C# files to output directory +└── Published as `dotnet tool` + +Usage: dotnet vizor-gen --input option.json --output src/Vizor.ECharts +``` + +### Implementation Steps: +1. Create `tools/vizor-echarts-gen/` as standalone project + - Copy generator core logic + - Remove all Vizor.ECharts references + - Pure code generation, no compilation + +2. Create tool manifest: + ```xml + DotnetTool + vizor-gen + ``` + +3. Configuration: + - Accept option.json path as CLI argument + - Accept output directory as CLI argument + - Optional: type mapping config file (JSON) + +4. Publishing: + - `dotnet pack -c Release` creates tool package + - `dotnet tool install -g vizor-echarts-gen` for global install + - Or use locally: `dotnet tool restore && dotnet vizor-gen ...` + +5. Remove generator from main solution + - Clean solution structure + - Clear separation of concerns + - Easier to version independently + +6. Document in README: + ```bash + # Regenerate types when upgrading ECharts + dotnet tool restore + dotnet vizor-gen --input echart-options/5.6.0/option.json --output src/Vizor.ECharts + ``` + +**Pros**: Maximum decoupling, professional tool experience, no build-time generation +**Cons**: Extra project, requires manual run after option.json updates, more complex setup + +--- + +## Recommended Approach: #5 (Git-Checked Generated Files) + #6 (Abstractions) +**Status**: RECOMMENDED NOW + +### Short Term (#5 - Already True): +Generated files are already committed to git. Normal workflow: +```bash +dotnet build # Works always (uses git-checked files) +dotnet run --project BindingGenerator # Regenerates types (only on option.json changes) +``` + +**Advantage**: Zero bootstrapping issues, matches how most code generators work (OpenAPI, Protobuf, etc.) + +### Medium Term (#6 - Build Foundation): +Once abstractions layer is ready: +``` +Vizor.ECharts.Abstractions (core types, no deps) +├── ISeries, IDataZoom interfaces (with [JsonPolymorphic]/[JsonDerivedType] attributes) +├── Color, NumberOrString types +└── JavascriptFunction utilities + +Generator → Abstractions (no Vizor.ECharts reference needed) +Main Library → Abstractions + Generated types +``` + +**Current State**: ISeries and IDataZoom are auto-generated by PolymorphicInterfaceGenerator using .NET 10 polymorphic serialization. This enables #6 later - the interfaces can be moved to abstractions without changing the serialization behavior. + +This enables #4 later if needed. + +--- + +## Recommended Implementation Order + +1. **Accept #5** (Current reality) + - Generated files stay in git + - Normal builds always work + - Regenerate explicitly when upgrading ECharts + - Document in README: `./regenerate-types.sh` + +2. **Implement #6** (Abstractions Assembly) + - Creates clean architectural boundary + - Enables future #4 without rework + - Takes ~2-3 hours + - Backward compatible + +3. **Optional: #4** (Standalone Tool) + - Publish as dotnet global tool + - Complete decoupling + - Professional option for end-users + - Implement after #6 is stable diff --git a/doc/Dimensions_Strong_Typing_Improvement.md b/doc/Dimensions_Strong_Typing_Improvement.md new file mode 100644 index 00000000..ef6d6ee7 --- /dev/null +++ b/doc/Dimensions_Strong_Typing_Improvement.md @@ -0,0 +1,83 @@ +# Dimensions Strong Typing Improvement Plan + +## Current State +- `Dataset.Dimensions` is typed as `List?` with a generator warning +- `Series.Dimensions` is also `List?` +- This is due to the ECharts spec allowing dimensions to be union types: `string | object | null` +- Generator lacks support for this union pattern and falls back to `List` + +## Specification (ECharts) +According to the ECharts option.json and documentation, each dimension can be: +- **String**: dimension name only (e.g., `"date"`) +- **Object**: dimension with metadata: + - `name`: string (dimension name) + - `type`: enum (`"number"` | `"ordinal"` | `"time"` | `"float"` | `"int"`) + - `displayName`: string (optional, for tooltip display) +- **Null**: skip this dimension (used as placeholder) + +## Current Workaround +Temporarily using `string[]?` for simplicity: +- Pros: Simple, avoids runtime `List` casting +- Cons: Loses ability to specify dimension metadata (type, displayName) and null placeholders + +## Planned Improvement (Future) + +### Step 1: Create DimensionDefinition Union Type +Create a new class `DimensionDefinition` that represents the union: +```csharp +public partial class DimensionDefinition +{ + [JsonPropertyName("name")] + public string? Name { get; set; } + + [JsonPropertyName("type")] + public DimensionType? Type { get; set; } + + [JsonPropertyName("displayName")] + public string? DisplayName { get; set; } +} + +public enum DimensionType +{ + Number, + Ordinal, + Time, + Float, + Int +} +``` + +### Step 2: Create Custom JsonConverter +Implement `DimensionDefinitionConverter` that handles: +- String input → `{name: value}` +- Object input → parse to DimensionDefinition +- Null input → null + +### Step 3: Update Generator +1. Add mapping in `TypeCollection.AddMappedType()` or similar: + ```csharp + // For dataset.dimensions and series.dimensions patterns + MappedTypes["dataset"]["dimensions"] = typeof(List); + ``` +2. Ensure generator emits `List` instead of `List` + +### Step 4: Apply to All Occurrences +- `Dataset.Dimensions` +- `Series.Dimensions` +- Any other properties with the same union pattern + +### Benefits +- ✅ Full type safety +- ✅ IntelliSense support for dimension properties +- ✅ Preserves ECharts spec compliance +- ✅ No runtime casting needed + +## References +- ECharts Option.json: `dataset.dimensions` type definition +- ECharts Handbook: Dataset tutorial +- Generator: `TypeCollection.cs`, `BasePhase.cs` +- Issue: Generator "unmapped patterns" - currently has `array,object,null` as unhandled + +## Timeline +- Phase 1 (Current): String-only workaround for immediate usability +- Phase 2 (Future): Implement full union type support as above diff --git a/doc/GENERATOR_IMPROVEMENT_README.md b/doc/GENERATOR_IMPROVEMENT_README.md new file mode 100644 index 00000000..f3606176 --- /dev/null +++ b/doc/GENERATOR_IMPROVEMENT_README.md @@ -0,0 +1,295 @@ +# Generator Improvement Plan - README + +**Implementation Status**: Phases 1-2 Complete ✅ | Phases 3-4 Planned 📋 + +This directory contains the complete specification for improving the vizor-echarts code generator. **Core infrastructure (Phases 1-2) is now implemented**. Diagnostic reporting and remaining type gaps (Phases 3-4) are planned for future development. + +## 🎯 Implementation Status + +### ✅ Completed (Phases 1-2) +- **DiagnosticCollector** - Aggregates type mapping diagnostics (257 lines) +- **TypePatternRegistry** - Central registry of 20+ supported patterns (228 lines) +- **PolymorphicInterfaceGenerator** - Auto-generates ISeries (22 types) and IDataZoom (2 types) +- **Version Tracking** - Generated files include ECharts version headers +- **Test Coverage** - Unit tests for version header generation + +### 📋 Planned (Phases 3-4) +- **Diagnostic Report Generation** - Auto-generate analysis reports (infrastructure ready) +- **Additional Custom Types** - Close remaining gaps (101 TODO markers) +- **MapType() Refactoring** - Simplify using registry more extensively + +### 🔧 Code Quality Improvements +See [Generator_Code_Quality_Improvements.md](Generator_Code_Quality_Improvements.md) for maintainability & developer experience enhancements: +- Extract MapType() into focused sub-methods (400+ lines → 4 methods <150 lines each) +- Replace Console.WriteLine with structured logging +- Configuration-driven special case registry +- Comprehensive error handling +- Activate diagnostic report generation + +### 🔮 Future Enhancements +- **Abstractions Layer** - Break circular dependency (see Circular_Dependency_Solutions.md) +- **Dimensions Strong Typing** - Enhanced dataset dimension types + +## 📋 Document Index + +### Start Here +1. **[EXECUTIVE_SUMMARY.md](../GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md)** (5 min read) + - Problem statement and solution overview + - 4-week phased approach + - Success metrics and Q&A + - **👉 Start here if you're new to this initiative** + +### Detailed Specifications +2. **[Generator_Improvement_Plan.md](Generator_Improvement_Plan.md)** (20 min read) + - Current state analysis (what's broken) + - Phase-by-phase specifications + - Diagnostic infrastructure design + - Pattern registry architecture + - Implementation strategy + - Success criteria and risk mitigation + +3. **[Generator_Code_Quality_Improvements.md](Generator_Code_Quality_Improvements.md)** (15 min read) + - Code quality assessment and priorities + - Refactoring recommendations (MapType() extraction) + - Logging system design + - Error handling improvements + - Configuration-driven special cases + - Implementation sequence and success metrics + +4. **[Generator_Improvement_Summary.md](Generator_Improvement_Summary.md)** (10 min read) + - Visual flowcharts (before/after) + - Type support matrix + - Implementation timeline + - Success metrics table + - Risk assessment + +### Implementation Details +5. **[Generator_Implementation_Guide.md](Generator_Implementation_Guide.md)** (30 min read) + - Complete code examples for all 3 new classes: + - `TypeMappingDiagnostic.cs` + - `DiagnosticCollector.cs` + - `TypePatternRegistry.cs` + - Before/after code samples + - Refactored `MapType()` implementation + - How to use the improved system + - Test examples + +### Context +6. **[Manual_Implementation_Analysis.md](Manual_Implementation_Analysis.md)** (existing) + - Baseline analysis of current unsupported patterns + - Existing custom types inventory + - Pattern categorization + +--- + +## 🎯 Quick Start + +### For Decision Makers +1. Read: [EXECUTIVE_SUMMARY.md](../GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md) (5 min) +2. Decision: Approve the 4-week plan +3. Assign: Phase 1 implementation (~3 days) + +### For Developers (Implementation) +1. Read: [Generator_Improvement_Plan.md](Generator_Improvement_Plan.md) (Phase 1 section) +2. Follow: [Generator_Implementation_Guide.md](Generator_Implementation_Guide.md) (Part 1) +3. Implement: 3 new files (~200 lines each) +4. Test: Ensure diagnostics are collected (no console output) + +### For Reviewers +1. Read: [Generator_Improvement_Summary.md](Generator_Improvement_Summary.md) (visual overview) +2. Review: Phase-by-phase specifications in Plan +3. Check: Risk mitigation strategies + +--- + +## 📊 Project Structure + +``` +doc/ +├── README.md (this file) +├── Generator_Improvement_Plan.md +│ ├── Phase 1: Type Categorization +│ ├── Phase 2: Refactor MapType() +│ ├── Phase 3: Pattern Discovery +│ └── Phase 4: Close Gaps +├── Generator_Improvement_Summary.md +│ ├── Visual problem/solution +│ ├── Type support matrix +│ ├── Timeline +│ └── Metrics +├── Generator_Implementation_Guide.md +│ ├── Code examples +│ ├── Class specifications +│ ├── Integration points +│ └── Test patterns +├── Manual_Implementation_Analysis.md (existing) +│ └── Baseline of current patterns +└── TypePatternAnalysisReport.md (to be generated, Week 3) + └── Auto-generated pattern analysis + +src/Vizor.ECharts.BindingGenerator/ +├── Phases/ +│ └── BasePhase.cs (to be refactored) +├── Diagnostics/ (NEW - Phase 1) +│ ├── TypeMappingDiagnostic.cs +│ ├── DiagnosticCollector.cs +│ └── DiagnosticReport.cs +├── Types/ +│ ├── TypePatternRegistry.cs (NEW - Phase 1) +│ └── [existing types...] +└── [existing structure...] + +src/Vizor.ECharts.Tests/Unit/Generator/ +├── TypePatternAnalysisTests.cs (NEW - Phase 3) +├── DiagnosticCollectorTests.cs (NEW - Phase 1) +└── ManualImplementationAnalysisTests.cs (existing) +``` + +--- + +## 🔄 4-Week Implementation Timeline + +``` +Week 1: Foundation (Phase 1) +├─ Create DiagnosticCollector.cs +├─ Create TypeMappingDiagnostic.cs +├─ Create TypePatternRegistry.cs +├─ Add diagnostics calls to MapType() +└─ Estimated: 3 days, Low risk + +Week 2: Refactor (Phase 2) +├─ Extract MapSingleType() +├─ Extract MapEnumType() +├─ Extract MapPartiallySupported() +├─ Reorganize MapType() with clear decision tree +└─ Estimated: 3 days, Medium risk (comprehensive tests required) + +Week 3: Analysis (Phase 3) +├─ Create TypePatternAnalysisTests.cs +├─ Generate pattern analysis report +├─ Document all patterns by category +├─ Prioritize unsupported patterns by impact +└─ Estimated: 2 days, No generation risk + +Week 4: Close Gaps (Phase 4) +├─ Implement top-priority custom types +├─ Add missing enum mappings +├─ Document typed accessor pattern +├─ Create TypePatternsGuide.md for future development +└─ Estimated: 3 days (iterative) +``` + +--- + +## 📈 Expected Outcomes + +### Code Quality +- ✅ MapType() method: 100+ complex lines → 60 clear lines +- ✅ Diagnostic tracking: scattered console → centralized collector +- ✅ Pattern registry: mixed throughout → single source of truth +- ✅ Maintainability: ~2-3x easier to add new patterns + +### Type Coverage +- ✅ Current fallbacks to `object`: ~12 patterns +- ✅ Target: ~3-5 patterns (acceptable, documented) +- ✅ Types with strong mapping: 95%+ of properties +- ✅ Types with acceptable fallback: 100% of properties + +### Developer Experience +- ✅ Clear diagnostic report showing what's supported/unsupported +- ✅ Actionable suggestions ("Create XyzType" or "Add enum mapping") +- ✅ Guide for adding new patterns (10 min instead of 30 min) +- ✅ Less generated code noise (`//TODO` comments eliminated) + +--- + +## 🚀 Phases at a Glance + +| Phase | Goal | Risk | Effort | Blockers | +|-------|------|------|--------|----------| +| **1** | Diagnostic infrastructure | ❌ None | 1 week | None | +| **2** | Clearer code structure | ⚠️ Medium | 1 week | Phase 1 complete | +| **3** | Pattern analysis report | ❌ None | 1 week | Phase 2 complete | +| **4** | Close priority gaps | ✅ Low | 1 week | Phase 3 results | + +--- + +## 💡 Key Insights + +1. **Diagnostic Tracking is Separate from Code Generation** + - Phase 1 can deploy independently + - Helps understand problems before fixing them + - Non-blocking: collect data while keeping current generation + +2. **Clear Decision Tree Makes Code Maintainable** + - Phase 2 refactoring improves code clarity + - Easier to add new patterns going forward + - Reduces maintenance burden + +3. **Data-Driven Prioritization** + - Phase 3 analysis shows actual impact + - Prioritize custom types by usage frequency + - Prevents "boiling the ocean" + +4. **Incremental Improvements Are Low-Risk** + - Phase 4 adds one pattern at a time + - Each addition is testable independently + - Easy to roll back if needed + +--- + +## 📚 Related Context + +- **Current Generator**: `src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs` +- **Existing Analysis**: `src/Vizor.ECharts.Tests/Unit/Generator/ManualImplementationAnalysisTests.cs` +- **Custom Types**: `src/Vizor.ECharts/Types/` (NumberOrString, ColorOrFunction, etc.) +- **Enum Mappings**: `src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs` (AddMappedEnumType calls) + +--- + +## ❓ FAQ + +**Q: Is this breaking?** +No. Every phase is backwards compatible: +- Phase 1: Purely additive (new diagnostic classes) +- Phase 2: Refactoring (same output, clearer code) +- Phase 3: Analysis only (no code generation changes) +- Phase 4: Incremental additions (one new type at a time) + +**Q: How is this different from the manual analysis?** +The manual analysis (Manual_Implementation_Analysis.md) was one-time research. This plan: +- Automates pattern discovery +- Creates sustainable infrastructure +- Provides ongoing reporting +- Makes it easy to add new patterns + +**Q: What if we find too many unsupported patterns?** +The diagnostic system + analysis report will show exactly which patterns and their impact. We can then: +1. Prioritize by usage frequency +2. Implement high-impact types first +3. Document acceptable fallbacks with typed accessors +4. Plan for future versions as needed + +**Q: Can teams start using the generator improvements immediately?** +- Phase 1 infrastructure: Yes (diagnostic-only) +- Phase 2 refactored code: Yes (drop-in replacement) +- Phase 3 report: Yes (informational, no generation change) +- Phase 4 new types: Yes, iteratively as implemented + +--- + +## 📞 Contacts & Resources + +**Questions about the plan?** +- See [EXECUTIVE_SUMMARY.md](../GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md#questions--answers) for Q&A +- See implementation specs in respective phase documents + +**Ready to start?** +- Developers: Follow [Generator_Implementation_Guide.md](Generator_Implementation_Guide.md) Part 1 +- Decision makers: Review [EXECUTIVE_SUMMARY.md](../GENERATOR_IMPROVEMENT_EXECUTIVE_SUMMARY.md) + +--- + +**Last Updated**: December 31, 2025 +**Status**: Ready for Phase 1 implementation +**Next Review**: After Phase 1 completion (~Week 2) diff --git a/doc/Generator_Code_Quality_Improvements.md b/doc/Generator_Code_Quality_Improvements.md new file mode 100644 index 00000000..6e66909f --- /dev/null +++ b/doc/Generator_Code_Quality_Improvements.md @@ -0,0 +1,714 @@ +# Generator Code Quality Improvements + +## Overview + +This document outlines code quality improvements for the BindingGenerator project, complementing the [Generator_Improvement_Plan.md](Generator_Improvement_Plan.md) which focuses on type mapping completeness. These improvements focus on maintainability, testability, and developer experience. + +**Assessment Date**: January 2026 +**Current Status**: Generator is functional and well-structured, but has technical debt in logging, method complexity, and diagnostic reporting activation. + +--- + +## Current Strengths + +✅ **Well-Structured Architecture** +- Clear separation of concerns: Phases, Types, Generators, Diagnostics +- TypePatternRegistry provides centralized type mapping logic (228 lines, 20+ patterns) +- DiagnosticCollector infrastructure for tracking mapping decisions (257 lines) + +✅ **Recent Improvements** +- Version tracking in generated files +- Polymorphic serialization support (ISeries 22 types, IDataZoom 2 types) +- Comprehensive test coverage (107 tests passing) +- Good pattern registry with 20+ type mappings + +--- + +## Priority Improvement Areas + +### 🔴 HIGH PRIORITY + +#### 1. Extract MapType() Sub-Methods +**Effort**: Medium (4-6 hours) | **Impact**: High maintainability + +**Current State**: [BasePhase.cs](../src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs) `MapType()` is 400+ lines with deep nesting (lines 203-570) + +**Issues**: +- Too many responsibilities in one method +- Hard to test individual mapping patterns +- Difficult to add new type patterns +- Special cases scattered throughout + +**Recommendation**: Extract pattern-specific methods + +```csharp +// Current: All in MapType() +protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + // 400+ lines... +} + +// Proposed: Decomposed into focused methods +protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + var propertyPath = $"{parent.Name}.{prop.Name}"; + var types = optProp.Types.OrderBy(t => t).ToList(); + + // Try special cases first + if (TryMapSpecialCaseProperty(parent, optProp, prop, propertyPath, types, out var specialType)) + return specialType; + + // Try single type patterns + if (optProp.Types.Count == 1) + return MapSingleType(parent, optProp, prop, propertyPath, types); + + // Try complex union patterns + return MapComplexUnion(parent, optProp, prop, propertyPath, types); +} + +protected virtual bool TryMapSpecialCaseProperty( + ObjectType parent, + OptionProperty optProp, + JsonProperty prop, + string propertyPath, + List types, + out IPropertyType? mappedType) +{ + mappedType = null; + + // Check property-specific special cases + if (SpecialCaseRegistry.TryGetValue((parent.DotNetType, prop.Name), out var factory)) + { + mappedType = factory(); + diagnosticCollector.RecordSupported(propertyPath, types, mappedType.DotNetType); + return true; + } + + return false; +} + +protected virtual IPropertyType? MapSingleType( + ObjectType parent, + OptionProperty optProp, + JsonProperty prop, + string propertyPath, + List types) +{ + // Handle single-type mappings + // Extract ~150 lines from current MapType() +} + +protected virtual IPropertyType? MapComplexUnion( + ObjectType parent, + OptionProperty optProp, + JsonProperty prop, + string propertyPath, + List types) +{ + // Handle multi-type unions + // Extract ~150 lines from current MapType() +} +``` + +**Benefits**: +- Each method has single responsibility +- Easier to test individual patterns +- Better readability +- Simpler to extend with new patterns +- Can unit test special case registry separately + +--- + +#### 2. Replace Console.WriteLine with Structured Logging +**Effort**: Low (2-3 hours) | **Impact**: Better diagnostics + +**Current State**: 20+ Console.WriteLine calls scattered throughout codebase + +```csharp +// BasePhase.cs examples: +Console.WriteLine($"WARNING: enum type '{prop.Name}' in '{parent.Name}'..."); +Console.WriteLine($"ERROR: Failed to map property '{prop.Name}'..."); +Console.WriteLine($"INFO: Partially supported pattern..."); +Console.WriteLine($"DEBUG: Singularized '{propName}' -> '{singularPropName}'..."); +``` + +**Issues**: +- No log level filtering +- Cannot disable debug output in production +- Output mixed with progress messages +- Not suitable for automated processing + +**Recommendation**: Create structured logging system + +```csharp +// New file: src/Vizor.ECharts.BindingGenerator/Diagnostics/Logger.cs +internal class Logger +{ + private readonly LogLevel minLevel; + private readonly TextWriter output; + + public Logger(LogLevel minLevel = LogLevel.Info, TextWriter? output = null) + { + this.minLevel = minLevel; + this.output = output ?? Console.Out; + } + + public void Debug(string message) + { + if (minLevel <= LogLevel.Debug) + output.WriteLine($"[DEBUG] {message}"); + } + + public void Info(string message) + { + if (minLevel <= LogLevel.Info) + output.WriteLine($"[INFO] {message}"); + } + + public void Warning(string message) + { + if (minLevel <= LogLevel.Warning) + output.WriteLine($"[WARN] {message}"); + } + + public void Error(string message) + { + if (minLevel <= LogLevel.Error) + output.WriteLine($"[ERROR] {message}"); + } +} + +internal enum LogLevel +{ + Debug = 0, + Info = 1, + Warning = 2, + Error = 3 +} +``` + +**Usage**: +```csharp +// In BasePhase constructor +protected readonly Logger logger; + +public BasePhase(TypeCollection typeCollection, Logger logger) +{ + this.typeCollection = typeCollection; + this.logger = logger; + // ... +} + +// Replace Console.WriteLine calls +logger.Debug($"Singularized '{propName}' -> '{singularPropName}' for type '{itemName}'"); +logger.Warning($"Enum type '{prop.Name}' in '{parent.Name}' with values '{values}' is not mapped"); +logger.Error($"Failed to map property '{prop.Name}' in type '{parent.Name}' with types '{typeList}'"); +``` + +**Benefits**: +- Filter by log level (--verbose flag for debug output) +- Consistent output format +- Easier to redirect to files +- Can capture warnings for diagnostic report +- Better testability (inject mock logger) + +--- + +#### 3. Activate Diagnostic Report Generation +**Effort**: Low (1-2 hours) | **Impact**: Visibility into type coverage + +**Current State**: DiagnosticCollector fully implemented (257 lines) but never used to generate reports + +```csharp +// Exists but not called: +public DiagnosticReport GenerateDiagnosticReport() +{ + return diagnosticCollector.GenerateReport(); +} +``` + +**Recommendation**: Generate and output reports after generation completes + +```csharp +// In GenerateOptionBindingTool.Run() - after all generation +foreach (var phase in phases) +{ + var report = phase.GenerateDiagnosticReport(); + + // Write report to file + var reportPath = Path.Combine(options.OutputDirectory, "diagnostics-report.md"); + File.WriteAllText(reportPath, report.ToMarkdown()); + + // Summary to console + logger.Info($"Generated diagnostic report: {reportPath}"); + logger.Info($" ✅ Supported: {report.SupportedCount}"); + logger.Info($" ⚠️ Partially Supported: {report.PartiallySupportedCount}"); + logger.Info($" ❌ Unsupported: {report.UnsupportedCount}"); + + // Exit with warning if too many unsupported + if (report.UnsupportedCount > 100) + logger.Warning($"High number of unsupported patterns - consider implementing custom types"); +} +``` + +**Report Format** (diagnostics-report.md): +```markdown +# ECharts 5.6.0 Type Mapping Diagnostic Report + +Generated: 2026-01-03 14:30:00 + +## Summary +- ✅ Supported: 1,234 properties (85%) +- ⚠️ Partially Supported: 45 properties (3%) +- ❌ Unsupported: 178 properties (12%) + +## Unsupported Patterns + +### array,object (23 occurrences) +**Examples**: +- Dataset.source +- GraphSeries.links +- SankeySeries.links + +**Suggestion**: Use object? with documentation - too ambiguous for automation + +**Priority**: Medium + +--- + +### enum,function (12 occurrences) +**Examples**: +- FunnelSeries.sort +- TreeSeries.sort + +**Suggestion**: Already partially supported with typed accessor pattern + +**Priority**: Low (infrastructure exists) + +--- +``` + +**Benefits**: +- Clear visibility into what's mapped vs. needs work +- Track progress over time (commit reports to git) +- Identify highest-impact improvements +- Documentation for contributors + +--- + +### 🟡 MEDIUM PRIORITY + +#### 4. Configuration-Driven Special Cases +**Effort**: Medium (3-4 hours) | **Impact**: Easier maintenance + +**Current State**: Property-specific special cases hardcoded throughout MapType() + +```csharp +// ~30 special case checks like this: +if (prop.Name == "position" && parent.Name == "tooltip" && string.Join(",", types) == "array,string") +{ + var tooltipPosType = new MappedCustomType(typeof(TooltipPosition)); + diagnosticCollector.RecordSupported(propertyPath, types, tooltipPosType.DotNetType); + return tooltipPosType; +} + +if ((prop.Name == "width" || prop.Name == "height") && parent.DotNetType == "Detail") +{ + var numberOrStringType = new MappedCustomType(typeof(NumberOrString)); + diagnosticCollector.RecordSupported(propertyPath, types, numberOrStringType.DotNetType); + return numberOrStringType; +} +``` + +**Issues**: +- Hard to find all special cases +- Difficult to audit coverage +- Copy-paste errors possible +- No clear pattern + +**Recommendation**: Centralized special case registry + +```csharp +// New file: src/Vizor.ECharts.BindingGenerator/Types/SpecialCaseRegistry.cs +internal static class SpecialCaseRegistry +{ + /// + /// Property-specific type overrides + /// Key: (ParentTypeName, PropertyName) + /// Value: Factory function returning the mapped type + /// + private static readonly Dictionary<(string ParentType, string PropName), Func> PropertySpecificMappings = new() + { + // Tooltip position accepts array or string + [("tooltip", "position")] = () => new MappedCustomType(typeof(TooltipPosition)), + + // Detail width/height accept numbers or percentage strings + [("Detail", "width")] = () => new MappedCustomType(typeof(NumberOrString)), + [("Detail", "height")] = () => new MappedCustomType(typeof(NumberOrString)), + + // Dimension accepts numeric indices or string names + [("Dataset", "dimension")] = () => new MappedCustomType(typeof(NumberOrString)), + + // Label rotate accepts numbers or "radial" string + [("Label", "rotate")] = () => new MappedCustomType(typeof(NumberOrString)), + + // TreemapSeriesData children is recursive + [("TreemapSeriesData", "children")] = () => new GenericListType(new SimpleType("TreemapSeriesData")), + + // Geo layoutCenter uses NumberOrStringArray + [("Geo", "layoutCenter")] = () => new MappedCustomType(typeof(NumberOrStringArray)), + + // Dataset transform uses polymorphic interface + [("Dataset", "transform")] = () => new SingleOrArrayType("IDatasetTransform"), + + // MagicType type is string array for chart types + [("MagicType", "type")] = () => new SimpleType("string[]"), + + // PiecewiseVisualMap pieces + [("PiecewiseVisualMap", "pieces")] = () => new GenericListType(new SimpleType("VisualMapPiece")), + + // Graph/Sankey links and categories - object for flexibility + [("GraphSeries", "links")] = () => new SimpleType("object"), + [("GraphSeries", "categories")] = () => new SimpleType("object"), + [("SankeySeries", "links")] = () => new SimpleType("object"), + + // TreeSeries data remains object for flexibility + [("TreeSeries", "data")] = () => new SimpleType("object"), + + // RadarSeriesData value accepts array or single value + [("RadarSeriesData", "value")] = () => new SimpleType("object"), + }; + + /// + /// Axis-specific type overrides (same mapping for multiple axis types) + /// + private static readonly Dictionary> AxisTypeMappings = new() + { + ["type"] = (parentType) => + { + if (IsAxisType(parentType)) + return new MappedEnumType("axisType", typeof(AxisType)); + return null; + } + }; + + public static bool TryGetSpecialCase( + string parentType, + string propName, + out IPropertyType? mappedType) + { + mappedType = null; + + // Check property-specific mappings + if (PropertySpecificMappings.TryGetValue((parentType, propName), out var factory)) + { + mappedType = factory(); + return true; + } + + // Check axis-specific mappings + if (AxisTypeMappings.TryGetValue(propName, out var axisFactory)) + { + mappedType = axisFactory(parentType); + return mappedType != null; + } + + return false; + } + + private static bool IsAxisType(string typeName) => + typeName is "xAxis" or "yAxis" or "angleAxis" or "radiusAxis" + or "parallelAxis" or "singleAxis" or "parallelAxisDefault"; + + /// + /// Get all registered special cases for documentation/auditing + /// + public static IEnumerable<(string ParentType, string PropName, string Description)> GetAllSpecialCases() + { + foreach (var kvp in PropertySpecificMappings) + { + yield return (kvp.Key.ParentType, kvp.Key.PropName, GetDescription(kvp.Value())); + } + } + + private static string GetDescription(IPropertyType type) + { + return type switch + { + MappedCustomType mct => mct.DotNetType, + GenericListType glt => $"List<{glt.InnerType}>", + SingleOrArrayType soat => $"SingleOrArrayType<{soat.InnerTypeName}>", + SimpleType st => st.DotNetType, + _ => "object" + }; + } +} +``` + +**Usage in MapType()**: +```csharp +protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + var propertyPath = $"{parent.Name}.{prop.Name}"; + var types = optProp.Types.OrderBy(t => t).ToList(); + + // Check special case registry first + if (SpecialCaseRegistry.TryGetSpecialCase(parent.DotNetType, prop.Name, out var specialType)) + { + var resultType = GetTypeName(specialType); + diagnosticCollector.RecordSupported(propertyPath, types, resultType); + return specialType; + } + + // Continue with normal type mapping... +} +``` + +**Benefits**: +- All special cases in one file - easy to audit +- Self-documenting with comments +- Can generate report of special cases +- Easier to test (check registry coverage) +- Less code duplication +- Pattern more clear + +--- + +#### 5. Add Comprehensive Error Handling +**Effort**: Low (2-3 hours) | **Impact**: Robustness + +**Current State**: Minimal try-catch blocks, errors propagate to top level + +```csharp +// In GenerateOptionBindingTool.Run() +using JsonDocument document = JsonDocument.Parse(File.ReadAllText(options.InputFile), jsonOptions); +// No try-catch - file read/parse errors crash tool +``` + +**Recommendation**: Add error handling with helpful messages + +```csharp +public int Run(GenerateOptionBindingOptions options) +{ + try + { + // Validate inputs + if (!File.Exists(options.InputFile)) + { + logger.Error($"Input file not found: {options.InputFile}"); + return ExitCode.FileNotFound; + } + + if (!Directory.Exists(options.OutputDirectory)) + { + logger.Error($"Output directory not found: {options.OutputDirectory}"); + return ExitCode.DirectoryNotFound; + } + + // Parse JSON with error handling + JsonDocument document; + try + { + var content = File.ReadAllText(options.InputFile); + document = JsonDocument.Parse(content, jsonOptions); + } + catch (JsonException ex) + { + logger.Error($"Invalid JSON in {options.InputFile}:"); + logger.Error($" {ex.Message}"); + logger.Error($" Line {ex.LineNumber}, Position {ex.BytePositionInLine}"); + return ExitCode.InvalidJson; + } + catch (IOException ex) + { + logger.Error($"Cannot read file {options.InputFile}: {ex.Message}"); + return ExitCode.IoError; + } + + using (document) + { + // Validate structure + if (!document.RootElement.TryGetProperty("option", out var optionElem)) + { + logger.Error($"Invalid option.json structure: missing 'option' root element"); + return ExitCode.InvalidStructure; + } + + // Process with error tracking + try + { + // ... existing processing code ... + } + catch (Exception ex) + { + logger.Error($"Error during code generation: {ex.Message}"); + logger.Debug($"Stack trace: {ex.StackTrace}"); + return ExitCode.GenerationError; + } + } + + logger.Info("Generation completed successfully"); + return ExitCode.Success; + } + catch (Exception ex) + { + logger.Error($"Unexpected error: {ex.Message}"); + logger.Debug($"Stack trace: {ex.StackTrace}"); + return ExitCode.UnexpectedError; + } +} + +// Exit code constants +internal static class ExitCode +{ + public const int Success = 0; + public const int FileNotFound = 1; + public const int DirectoryNotFound = 2; + public const int InvalidJson = 3; + public const int InvalidStructure = 4; + public const int GenerationError = 5; + public const int IoError = 6; + public const int UnexpectedError = 99; +} +``` + +**Benefits**: +- Helpful error messages for users +- Clear exit codes for automation +- Better debugging with stack traces in debug mode +- Graceful degradation + +--- + +### 🟢 LOW PRIORITY + +#### 6. Convert Magic Numbers to Named Constants +**Effort**: Low (1 hour) | **Impact**: Code clarity + +**Current State**: +```csharp +// Version extraction +if (!candidate.Contains('.') || candidate.Split('.').Length >= 3) +// Why 3? Not documented + +// String handling +if (word.Length > 1) + sb.Append(word[1..]); +``` + +**Recommendation**: +```csharp +private const int MinVersionNumberParts = 3; // e.g., "5.6.0" +if (!candidate.Contains('.') || candidate.Split('.').Length >= MinVersionNumberParts) + +private const int FirstCharacterIndex = 0; +private const int RestOfWordStartIndex = 1; +if (word.Length > RestOfWordStartIndex) + sb.Append(word[RestOfWordStartIndex..]); +``` + +--- + +#### 7. Improve Type Safety in Comparisons +**Effort**: Medium (2-3 hours) | **Impact**: Reduce bugs + +**Current State**: String comparisons for type checking - fragile +```csharp +if (optProp.ParentType == null || + string.IsNullOrEmpty(optProp.ParentType.Name) || + optProp.ParentType.Name == "ChartOptions" || + optProp.ParentType.Name == "option") +``` + +**Recommendation**: Add property or method +```csharp +// In ObjectType or OptionProperty class +public bool IsTopLevelProperty => + ParentType == null || + string.IsNullOrEmpty(ParentType.Name) || + ParentType.Name is "ChartOptions" or "option"; + +// Usage +if (optProp.IsTopLevelProperty) +``` + +--- + +## Implementation Priority Matrix + +| Priority | Improvement | Effort | Impact | When | +|----------|------------|--------|---------|------| +| **HIGH** | Extract MapType() sub-methods | Medium (4-6h) | High | Before adding new patterns | +| **HIGH** | Replace Console with Logger | Low (2-3h) | High | Next session | +| **HIGH** | Activate diagnostic reports | Low (1-2h) | High | Next session | +| **MEDIUM** | Configuration-driven special cases | Medium (3-4h) | Medium | Before Phase 4 | +| **MEDIUM** | Add error handling | Low (2-3h) | Medium | Before release | +| **LOW** | Named constants | Low (1h) | Low | Anytime | +| **LOW** | Type safety checks | Medium (2-3h) | Low | Anytime | + +--- + +## Suggested Implementation Sequence + +### Session 1: Quick Wins (4-6 hours) +1. ✅ Activate diagnostic report generation (1-2h) +2. ✅ Replace Console.WriteLine with Logger (2-3h) +3. ✅ Add error handling to file I/O (1-2h) + +**Outcome**: Better visibility and robustness + +### Session 2: Refactoring (6-8 hours) +1. Extract MapType() into smaller methods (4-6h) +2. Add unit tests for extracted methods (2h) + +**Outcome**: More maintainable codebase + +### Session 3: Configuration (4-5 hours) +1. Create SpecialCaseRegistry (3-4h) +2. Migrate existing special cases (1h) + +**Outcome**: Easier to manage special cases + +### Session 4: Polish (2-3 hours) +1. Convert magic numbers to constants (1h) +2. Add type safety helpers (1-2h) + +**Outcome**: Cleaner, more maintainable code + +--- + +## Success Metrics + +**Before Improvements**: +- 20+ scattered Console.WriteLine calls +- 400-line MapType() method +- ~30 hardcoded special cases +- No diagnostic report output +- Basic error messages + +**After Improvements**: +- Structured logging with levels +- MapType() split into 4 focused methods (each <150 lines) +- Centralized SpecialCaseRegistry with documentation +- Automatic diagnostic report generation +- Comprehensive error handling with helpful messages +- All 107 tests still passing + +--- + +## Related Documentation + +- [Generator Improvement Plan](Generator_Improvement_Plan.md) - Type mapping completeness +- [Generator Implementation Guide](Generator_Implementation_Guide.md) - Code examples +- [Testing Strategy](Testing_Strategy.md) - Test infrastructure +- [Circular Dependency Solutions](Circular_Dependency_Solutions.md) - Architecture plans + +--- + +## Notes + +- These improvements are **orthogonal** to Phase 1-4 type mapping work +- Can be implemented **incrementally** without blocking other work +- Focus on **maintainability and developer experience** +- All changes should maintain **backward compatibility** +- Keep all **107 tests passing** throughout refactoring diff --git a/doc/Generator_Extension_Plan.md b/doc/Generator_Extension_Plan.md new file mode 100644 index 00000000..0959444e --- /dev/null +++ b/doc/Generator_Extension_Plan.md @@ -0,0 +1,514 @@ +# Generator Extension Plan + +This document outlines how to extend the BindingGenerator to automatically produce the manual implementations currently required. + +## Implementation Status + +- ✅ **Phase 1 Complete** (December 30, 2024) - New union type patterns (BoolOrString, NumberOrStringArray) +- ✅ **Phase 2 Complete** (December 30, 2024) - SingleOrArrayType for Grid/XAxis/YAxis automation +- ✅ **Phase 3 Complete** (December 30, 2024) - EnumOrFunctionType for Sort properties +- ⏳ **Phase 4 Pending** - Visual properties enrichment (optional) + +## Current Generator Architecture + +### Key Components + +1. **Phases/BasePhase.cs** + - `MapPropertyType()` - Main type mapping logic with switch statements for type patterns + - Handles single types, 2-type unions, and 3-type unions + - Falls back to `object?` with TypeWarning for unmapped patterns + +2. **Generators/ObjectTypeClassGenerator.cs** + - `Generate()` - Writes C# class files with properties + - Currently generates: `[JsonPropertyName]`, `[DefaultValue]`, property with getter/setter + - Does NOT generate: `[JsonIgnore]` typed accessors, additional wrapper properties + +3. **Types/IPropertyType.cs** hierarchy + - `SimpleType` - Basic types (string, double, bool, object) + - `MappedCustomType` - Existing union types (NumberOrBool, etc.) + - `MappedEnumType` - Enum types + - `GenericListType` - List + - `ObjectType` - Complex objects + +## Extension Strategy + +### 1. Add New Union Type Patterns (Easy - 1-2 hours) + +**Goal:** Add missing 2-type and 3-type patterns to `BasePhase.MapPropertyType()` + +**Implementation in BasePhase.cs line ~240:** + +```csharp +// Add to 2-type union section: +case ("boolean", "string"): + return new MappedCustomType(typeof(BoolOrString)); +case ("array", "enum"): + // Need generic: return new MappedGenericType("EnumOrArray", enumType); + return new SimpleType("object"); // fallback until generic support +case ("enum", "number"): + // Need generic: return new MappedGenericType("EnumOrNumber", enumType); + return new SimpleType("object"); // fallback until generic support + +// Add to 3-type union section after line ~290: +else if (optProp.Types is ["array", "enum", "number"]) +{ + return new SimpleType("object"); // Complex - keep as typed accessor pattern +} +else if (optProp.Types is ["array", "number", "string"]) +{ + return new MappedCustomType(typeof(NumberOrStringArray)); +} +``` + +**Required new Types/ files to create first:** +- `BoolOrString.cs` - Same pattern as `NumberOrString.cs` +- `NumberOrStringArray.cs` - Already exists but not registered + +**Difficulty:** ⭐ Easy - Just add cases to switch statement + +--- + +### 2. Generate Object + Typed Accessor Pattern (Medium - 4-6 hours) + +**Goal:** Automatically generate properties like: + +```csharp +[JsonPropertyName("grid")] +public object? GridObject { get; set; } + +[JsonIgnore] +public Grid? Grid +{ + get => GridObject as Grid; + set => GridObject = value; +} + +[JsonIgnore] +public List? GridList +{ + get => GridObject as List; + set => GridObject = value; +} +``` + +**Implementation Strategy:** + +#### A. Detect Single-or-Array Pattern + +In `BasePhase.MapPropertyType()`, detect when ECharts option.json specifies both object and array: + +```csharp +// Special handling for single-or-array pattern +if (optProp.Types is ["array", "object"] || IsArrayOfSingleType(optProp)) +{ + var innerType = DetectInnerObjectType(optProp, prop.Name); + return new SingleOrArrayType(innerType); +} +``` + +#### B. Create New IPropertyType Implementation + +Create `Types/SingleOrArrayType.cs`: + +```csharp +internal class SingleOrArrayType : IPropertyType +{ + public string InnerTypeName { get; } + + public SingleOrArrayType(string innerTypeName) + { + InnerTypeName = innerTypeName; + } + + public string DotNetType => "object"; // The backing field type + public string? TypeWarning => null; +} +``` + +#### C. Modify ObjectTypeClassGenerator + +Extend `ObjectTypeClassGenerator.Generate()` to detect `SingleOrArrayType` and generate three properties: + +```csharp +if (prop.MappedType is SingleOrArrayType singleOrArray) +{ + // Generate backing field + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonPropertyName(\"{prop.Name}\")]"); + writer.WriteLine($"public object? {prop.PropertyName}Object {{ get; set; }}"); + writer.EmptyLine(); + + // Generate single accessor + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public {singleOrArray.InnerTypeName}? {prop.PropertyName}"); + writer.WriteLine($"{{"); + writer.WriteLine($"\tget => {prop.PropertyName}Object as {singleOrArray.InnerTypeName};"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.WriteLine($"}}"); + writer.EmptyLine(); + + // Generate list accessor + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public List<{singleOrArray.InnerTypeName}>? {prop.PropertyName}List"); + writer.WriteLine($"{{"); + writer.WriteLine($"\tget => {prop.PropertyName}Object as List<{singleOrArray.InnerTypeName}>;"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.WriteLine($"}}"); + writer.EmptyLine(); +} +else +{ + // Existing property generation logic... +} +``` + +**Files to modify:** +1. `Types/SingleOrArrayType.cs` (new) +2. `Phases/BasePhase.cs` - Add detection logic +3. `Generators/ObjectTypeClassGenerator.cs` - Modify `Generate()` method + +**Difficulty:** ⭐⭐⭐ Medium - Requires new type class and generator logic changes + +**Implementation Complete (December 30, 2024):** + +✅ Created `Types/SingleOrArrayType.cs` with InnerTypeName property +✅ Added `IsArrayAndObject()` helper method to BasePhase.cs +✅ Added detection logic in `MapType()` to identify array+object patterns with ItemType +✅ Modified ObjectTypeClassGenerator.cs to generate three properties when encountering SingleOrArrayType +✅ Created 8 unit tests in Phase2SingleOrArrayTests.cs (all passing) +✅ Verified existing manual implementations (Grid, XAxis, YAxis, Calendar, Dataset) match generated pattern + +**Test Results:** 49/49 tests passing (41 original + 8 Phase 2) + +**Properties Now Automatable:** +- `ChartOptions.Grid` / `GridList` / `GridObject` +- `ChartOptions.XAxis` / `XAxisList` / `XAxisObject` +- `ChartOptions.YAxis` / `YAxisList` / `YAxisObject` +- `ChartOptions.Calendar` / `CalendarList` / `CalendarObject` +- `ChartOptions.Dataset` / `DatasetList` / `DatasetObject` + +**Note:** The generator now automatically creates the three-property pattern (Object backing field + single accessor + list accessor) for any property with `types: ["array", "object"]` and an ItemType defined in option.json. + +--- + +### 3. Generate Enum + Function Typed Accessor Pattern (Medium - 3-4 hours) + +**Goal:** Automatically generate properties like: + +```csharp +[JsonPropertyName("sort")] +[DefaultValue("descending")] +public object? SortObject { get; set; } + +[JsonIgnore] +public FunnelSortOrder? Sort +{ + get => (FunnelSortOrder?)SortObject; + set => SortObject = value; +} + +[JsonIgnore] +public JavascriptFunction? SortFunction +{ + get => SortObject as JavascriptFunction; + set => SortObject = value; +} +``` + +**Implementation Strategy:** + +Similar to SingleOrArrayType but simpler: + +#### A. Detect Enum + Function Pattern + +```csharp +if (optProp.Types is ["enum", "function"]) +{ + var enumType = DetectEnumType(optProp.EnumOptions, prop.Name); + return new EnumOrFunctionType(enumType); +} +``` + +#### B. Create EnumOrFunctionType + +```csharp +internal class EnumOrFunctionType : IPropertyType +{ + public string EnumTypeName { get; } + + public EnumOrFunctionType(string enumTypeName) + { + EnumTypeName = enumTypeName; + } + + public string DotNetType => "object"; + public string? TypeWarning => null; +} +``` + +#### C. Modify Generator + +In `ObjectTypeClassGenerator.Generate()`: + +```csharp +if (prop.MappedType is EnumOrFunctionType enumOrFunc) +{ + // Generate object backing field + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonPropertyName(\"{prop.Name}\")]"); + writer.WriteDefaultValueAttribute(prop.Default); + writer.WriteLine($"public object? {prop.PropertyName}Object {{ get; set; }}"); + writer.EmptyLine(); + + // Generate enum accessor + writer.WriteDocumentation($"{prop.Description}"); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public {enumOrFunc.EnumTypeName}? {prop.PropertyName}"); + writer.WriteLine($"{{"); + writer.WriteLine($"\tget => ({enumOrFunc.EnumTypeName}?){prop.PropertyName}Object;"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.WriteLine($"}}"); + writer.EmptyLine(); + + // Generate function accessor + writer.WriteDocumentation($"A {prop.Name} function."); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public JavascriptFunction? {prop.PropertyName}Function"); + writer.WriteLine($"{{"); + writer.WriteLine($"\tget => {prop.PropertyName}Object as JavascriptFunction;"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.WriteLine($"}}"); + writer.EmptyLine(); +} +``` + +**Difficulty:** ⭐⭐⭐ Medium + +**Implementation Complete (December 30, 2024):** + +✅ Created `Types/EnumOrFunctionType.cs` with EnumTypeName property +✅ Added detection logic in BasePhase.cs for `["enum", "function"]` pattern +✅ Used `TryGetMappedEnumType` to resolve enum type dynamically +✅ Modified ObjectTypeClassGenerator.cs to generate three properties when encountering EnumOrFunctionType +✅ Created 8 unit tests in Phase3EnumOrFunctionTests.cs (all passing) +✅ Verified existing manual implementations (FunnelSeries.Sort, SunburstSeries.Sort) match generated pattern + +**Test Results:** 57/57 tests passing (41 original + 8 Phase 2 + 8 Phase 3) + +**Properties Now Automatable:** +- `FunnelSeries.Sort` / `SortFunction` / `SortObject` (enum: FunnelSortOrder) +- `SunburstSeries.Sort` / `SortFunction` / `SortObject` (enum: SortOrder) + +**How It Works:** +When the generator encounters a property with `types: ["enum", "function"]` in option.json, it: +1. Looks up the enum type using the existing `TryGetMappedEnumType` method +2. Creates an EnumOrFunctionType with the resolved enum name +3. Generates three properties: + - `{PropertyName}Object` - object backing field with [JsonPropertyName] + - `{PropertyName}` - enum accessor with cast: `(EnumType?){PropertyName}Object` + - `{PropertyName}Function` - JavascriptFunction accessor with `as` cast + +**Note:** This pattern automatically handles any property where ECharts accepts either an enum value OR a custom JavaScript function, enabling type-safe access while maintaining flexibility. + +--- + +### 4. Handle Visual Properties Pattern (Medium-Hard - 6-8 hours) + +**Goal:** Detect properties like InBrush/OutOfBrush that follow a standard visual encoding pattern + +**Challenge:** option.json might not fully describe these properties, requiring: +- Manual configuration file listing known visual property patterns +- Heuristic detection based on property names + +**Implementation Strategy:** + +#### A. Create Configuration File + +Create `BindingGenerator/VisualPropertyPatterns.json`: + +```json +{ + "visualPropertyTypes": [ + { + "typeName": "InBrush", + "properties": [ + { "name": "symbol", "type": "Icon" }, + { "name": "symbolSize", "type": "NumberOrNumberArray" }, + { "name": "color", "type": "Color" }, + { "name": "colorAlpha", "type": "double" }, + { "name": "opacity", "type": "double" }, + { "name": "colorLightness", "type": "double" }, + { "name": "colorSaturation", "type": "double" }, + { "name": "colorHue", "type": "double" } + ] + }, + { + "typeName": "OutOfBrush", + "properties": "sameAs:InBrush" + } + ] +} +``` + +#### B. Post-Processing Phase + +Create `Phases/EnrichVisualPropertiesPhase.cs`: + +```csharp +internal class EnrichVisualPropertiesPhase : BasePhase +{ + private Dictionary> visualPatterns; + + public EnrichVisualPropertiesPhase(TypeCollection typeCollection) + : base(typeCollection) + { + visualPatterns = LoadVisualPatterns("VisualPropertyPatterns.json"); + } + + internal override void Run(JsonElement root) + { + foreach (var objType in typeCollection.ObjectTypes) + { + if (visualPatterns.TryGetValue(objType.Name, out var props)) + { + EnrichWithVisualProperties(objType, props); + } + } + } + + private void EnrichWithVisualProperties(ObjectType objType, List props) + { + foreach (var visualProp in props) + { + if (!objType.Properties.Any(p => p.Name == visualProp.Name)) + { + objType.Properties.Add(CreateVisualProperty(visualProp)); + } + } + } +} +``` + +#### C. Register Phase + +In `GenerateOptionBindingTool.cs`: + +```csharp +var phases = new BasePhase[] +{ + new GenerateObjectTypesPhase(typeCollection), + new EnrichVisualPropertiesPhase(typeCollection) // NEW +}; + +foreach (var phase in phases) +{ + phase.Run(root); +} +``` + +**Difficulty:** ⭐⭐⭐⭐ Medium-Hard - Requires new phase infrastructure + +--- + +## Implementation Priority + +### Phase 1: Quick Wins (1-2 hours) +✅ Add `BoolOrString` type mapping +✅ Register `NumberOrStringArray` type mapping + +**Impact:** Eliminates 4-5 manual implementations +**Files to change:** `BasePhase.cs` (add 2 cases) + +### Phase 2: Core Infrastructure (4-6 hours) +✅ Implement `SingleOrArrayType` for Grid/XAxis/YAxis/etc. +✅ Modify `ObjectTypeClassGenerator` to generate typed accessors + +**Impact:** Eliminates Grid, XAxis, YAxis, VisualMap, Calendar manual implementations (5 properties) +**Files to change:** +- `Types/SingleOrArrayType.cs` (new) +- `Phases/BasePhase.cs` (detection logic) +- `Generators/ObjectTypeClassGenerator.cs` (generation logic) + +### Phase 3: Advanced Patterns (3-4 hours) +✅ Implement `EnumOrFunctionType` for Sort properties +✅ Modify generator for enum + function accessors + +**Impact:** Eliminates FunnelSeries.Sort, SunburstSeries.Sort (2 properties) +**Files to change:** +- `Types/EnumOrFunctionType.cs` (new) +- `Phases/BasePhase.cs` (detection) +- `Generators/ObjectTypeClassGenerator.cs` (generation) + +### Phase 4: Visual Properties Enrichment (6-8 hours) [OPTIONAL] +⚠️ Create visual property configuration system +⚠️ Implement post-processing phase + +**Impact:** Eliminates InBrush/OutOfBrush manual implementations (16 properties) +**Files to change:** +- `VisualPropertyPatterns.json` (new) +- `Phases/EnrichVisualPropertiesPhase.cs` (new) +- `GenerateOptionBindingTool.cs` (register phase) + +--- + +## Testing Strategy + +After each phase, verify: + +1. **Regenerate bindings:** + ```bash + cd src/Vizor.ECharts.BindingGenerator + dotnet run -- option-binding --input path/to/option.json --output ../Vizor.ECharts + ``` + +2. **Build library:** + ```bash + cd ../Vizor.ECharts + dotnet build + ``` + +3. **Run existing tests:** + ```bash + cd ../Vizor.ECharts.Tests + dotnet test + ``` + +4. **Check warnings.txt:** + - Should see reduction in unmapped properties + - Compare before/after counts + +5. **Manual verification:** + - Open generated files (Grid, XAxis, InBrush, etc.) + - Verify typed accessor pattern is correct + - Check JSON serialization attributes + +--- + +## Benefits of Generator Extension + +1. **Consistency** - All similar patterns handled uniformly +2. **Maintainability** - ECharts 6 upgrade will be smoother +3. **Documentation** - Generated code is self-documenting +4. **Coverage** - Reduces manual implementation burden from ~17 to ~2-3 edge cases +5. **Type Safety** - Typed accessors provide better IntelliSense + +## Estimated Total Effort + +- **Phase 1 (Quick Wins):** 1-2 hours → 25% reduction in manual work +- **Phase 2 (Core):** 4-6 hours → 50% reduction in manual work +- **Phase 3 (Advanced):** 3-4 hours → 65% reduction in manual work +- **Phase 4 (Optional):** 6-8 hours → 85% reduction in manual work + +**Total: 14-20 hours for complete automation** + +## Alternative: Hybrid Approach + +If full automation is too time-consuming: + +1. Implement Phase 1 & 2 (5-8 hours) → Cover 75% of cases +2. Keep Phase 3 & 4 as manual implementations +3. Revisit automation when upgrading to ECharts 7+ + +This gives maximum ROI for minimum investment. diff --git a/doc/Generator_Implementation_Guide.md b/doc/Generator_Implementation_Guide.md new file mode 100644 index 00000000..bfd93f1e --- /dev/null +++ b/doc/Generator_Implementation_Guide.md @@ -0,0 +1,676 @@ +# Generator Improvement: Code Examples & Implementation Guide + +## Part 1: Diagnostic Infrastructure (Phase 1) + +### Step 1: Create TypeMappingDiagnostic.cs + +```csharp +// src/Vizor.ECharts.BindingGenerator/Diagnostics/TypeMappingDiagnostic.cs + +namespace Vizor.ECharts.BindingGenerator.Diagnostics; + +internal enum DiagnosticLevel +{ + /// Fully supported with strong type + Supported, + + /// Falls back to object? with typed accessors + PartiallySupported, + + /// Falls back to object or downgraded type + Unsupported, + + /// New pattern - needs investigation + RequiresInvestigation +} + +internal class TypeMappingDiagnostic +{ + /// e.g., "CrossStyle.type" or "FunnelSeries.sort" + public string PropertyPath { get; set; } = string.Empty; + + /// e.g., ["enum", "number", "array"] + public List Types { get; set; } = new(); + + /// What was generated + public DiagnosticLevel Level { get; set; } + + /// Descriptive message + public string Message { get; set; } = string.Empty; + + /// How to fix/improve it + public string? Suggestion { get; set; } + + /// Additional context (enum options, examples, etc.) + public Dictionary Context { get; set; } = new(); + + public override string ToString() + { + var typeStr = string.Join(",", Types); + return $"[{Level}] {PropertyPath}: {typeStr} → {Message}"; + } +} +``` + +### Step 2: Create DiagnosticCollector.cs + +```csharp +// src/Vizor.ECharts.BindingGenerator/Diagnostics/DiagnosticCollector.cs + +namespace Vizor.ECharts.BindingGenerator.Diagnostics; + +internal class DiagnosticCollector +{ + private readonly List diagnostics = new(); + + public void RecordSupported(string propertyPath, List types, string mappedType) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = types, + Level = DiagnosticLevel.Supported, + Message = $"Mapped to {mappedType}" + }); + } + + public void RecordPartiallySupported( + string propertyPath, + List types, + string fallback, + string suggestion) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = types, + Level = DiagnosticLevel.PartiallySupported, + Message = $"Falls back to {fallback} with typed accessors", + Suggestion = suggestion + }); + } + + public void RecordUnsupported( + string propertyPath, + List types, + string fallback = "object", + string? suggestion = null) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = types, + Level = DiagnosticLevel.Unsupported, + Message = $"Falls back to {fallback}", + Suggestion = suggestion ?? "Investigate if a custom type is needed" + }); + } + + public void RecordRequiresInvestigation( + string propertyPath, + List types, + string reason) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = types, + Level = DiagnosticLevel.RequiresInvestigation, + Message = reason + }); + } + + public DiagnosticReport GenerateReport() + { + return new DiagnosticReport(diagnostics); + } + + public IReadOnlyList AllDiagnostics => diagnostics.AsReadOnly(); +} + +internal class DiagnosticReport +{ + private readonly IReadOnlyList diagnostics; + + public DiagnosticReport(IReadOnlyList diagnostics) + { + this.diagnostics = diagnostics; + } + + public int SupportedCount => diagnostics.Count(d => d.Level == DiagnosticLevel.Supported); + public int PartiallyCount => diagnostics.Count(d => d.Level == DiagnosticLevel.PartiallySupported); + public int UnsupportedCount => diagnostics.Count(d => d.Level == DiagnosticLevel.Unsupported); + public int InvestigateCount => diagnostics.Count(d => d.Level == DiagnosticLevel.RequiresInvestigation); + public int TotalCount => diagnostics.Count; + + public IEnumerable> GroupByPattern() + { + return diagnostics + .GroupBy(d => string.Join(",", d.Types.OrderBy(t => t))) + .OrderByDescending(g => g.Count()); + } + + public string ToMarkdown() + { + var sb = new StringBuilder(); + sb.AppendLine("# Type Pattern Analysis Report"); + sb.AppendLine($"Generated: {DateTime.Now:yyyy-MM-dd HH:mm}"); + sb.AppendLine(); + sb.AppendLine("## Summary"); + sb.AppendLine($"- Total properties: {TotalCount}"); + sb.AppendLine($"- Fully supported: {SupportedCount} ({100.0 * SupportedCount / TotalCount:F1}%)"); + sb.AppendLine($"- Partially supported: {PartiallyCount} ({100.0 * PartiallyCount / TotalCount:F1}%)"); + sb.AppendLine($"- Unsupported: {UnsupportedCount} ({100.0 * UnsupportedCount / TotalCount:F1}%)"); + sb.AppendLine($"- Requires investigation: {InvestigateCount} ({100.0 * InvestigateCount / TotalCount:F1}%)"); + sb.AppendLine(); + + // Unsupported patterns section + var unsupported = diagnostics.Where(d => d.Level == DiagnosticLevel.Unsupported).ToList(); + if (unsupported.Any()) + { + sb.AppendLine("## Unsupported Patterns"); + foreach (var group in GroupByPattern().Where(g => g.Any(d => d.Level == DiagnosticLevel.Unsupported))) + { + var typeStr = group.Key; + var examples = group.Where(d => d.Level == DiagnosticLevel.Unsupported).Take(3); + + sb.AppendLine($"### {typeStr} ({group.Count(d => d.Level == DiagnosticLevel.Unsupported)} occurrences)"); + sb.AppendLine($"Examples: {string.Join(", ", examples.Select(e => e.PropertyPath))}"); + + var suggestion = examples.FirstOrDefault()?.Suggestion; + if (suggestion != null) + sb.AppendLine($"Action: {suggestion}"); + + sb.AppendLine(); + } + } + + return sb.ToString(); + } +} +``` + +### Step 3: Create TypePatternRegistry.cs + +```csharp +// src/Vizor.ECharts.BindingGenerator/Types/TypePatternRegistry.cs + +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class TypePatternRegistry +{ + private readonly TypeCollection typeCollection; + + /// Primitive types that map to simple C# types + private static readonly Dictionary PrimitiveTypes = new() + { + { "string", "string" }, + { "number", "double" }, + { "boolean", "bool" }, + { "object", "object" }, + }; + + /// Fully supported 2-3 element union types + private static readonly Dictionary SupportedPatterns = new() + { + { "boolean,number", typeof(NumberOrBool) }, + { "boolean,string", typeof(BoolOrString) }, + { "number,string", typeof(NumberOrString) }, + { "array,number", typeof(NumberOrNumberArray) }, + { "function,string", typeof(StringOrFunction) }, + { "function,number", typeof(NumberOrFunction) }, + { "function,object", typeof(ObjectOrFunction) }, + { "color,function", typeof(ColorOrFunction) }, + { "array,color", typeof(ColorArray) }, + { "array,number,string", typeof(NumberOrStringArray) }, + { "array,function,number", typeof(NumberArrayOrFunction) }, + { "function,number,string", typeof(NumberOrStringOrFunction) }, + // Add more as needed + }; + + /// Patterns that need typed accessor generation + private static readonly HashSet PartiaallySupportedPatterns = new() + { + "enum,function", // FunnelSeries.sort - enum OR function + // Add more as needed + }; + + /// Patterns too complex for automation - document but keep as object + private static readonly HashSet TrulyUnsupported = new() + { + "*,number", // itemGap - ambiguous + "date,object,number,string", // Too many options + }; + + public TypePatternRegistry(TypeCollection typeCollection) + { + this.typeCollection = typeCollection; + } + + /// Try to get a mapped type for a list of types + public bool TryGetMappedType( + List types, + string parentName, + out IPropertyType? mappedType) + { + // Single type - primitive mapping + if (types.Count == 1) + { + var type = types[0]; + if (PrimitiveTypes.TryGetValue(type, out var primitiveType)) + { + mappedType = new SimpleType(primitiveType); + return true; + } + } + + // Union type - check supported patterns + if (types.Count >= 2) + { + var key = string.Join(",", types.OrderBy(t => t)); + + if (SupportedPatterns.TryGetValue(key, out var customType)) + { + mappedType = new MappedCustomType(customType); + return true; + } + } + + mappedType = null; + return false; + } + + /// Check if pattern needs typed accessor generation + public bool IsPartiallySupported(List types) + { + var key = string.Join(",", types.OrderBy(t => t)); + return PartiaallySupportedPatterns.Contains(key); + } + + /// Check if pattern is truly unsupported (no automation possible) + public bool IsTrulyUnsupported(List types, out string reason) + { + var key = string.Join(",", types.OrderBy(t => t)); + + if (TrulyUnsupported.Contains(key)) + { + reason = $"Pattern '{key}' is too ambiguous for strong typing"; + return true; + } + + reason = string.Empty; + return false; + } + + /// Get all known patterns for documentation + public IEnumerable GetAllSupportedPatterns() + { + return SupportedPatterns.Keys.Concat(PartiaallySupportedPatterns); + } +} +``` + +--- + +## Part 2: Refactored MapType() (Phase 2) + +### Before: Large complex method (simplified example) + +```csharp +protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + if (optProp.Types == null || optProp.Types.Count == 0) + throw new ArgumentException($"JSON property '{prop.Name}' could not be mapped: no type info available"); + + // First try mapping enum types by name + if (typeCollection.TryGetMappedEnumType(prop.Name, parent.Name, out var mappedEnumType)) + return mappedEnumType; + + // Detect single-or-array pattern (Grid, XAxis, YAxis, etc.) + if (IsArrayAndObject(optProp) && optProp.ItemType != null) + { + var innerType = optProp.ItemType; + if (innerType is IObjectType objType) + { + return new SingleOrArrayType(objType.DotNetType); + } + } + + // Matching based on types: simple first + if (optProp.Types.Count == 1) + { + switch (optProp.Types[0]) + { + case "object": + return ParseObjectType(optProp, prop.Name, prop.Value, dataPrefix: prop.Name, typeGroup: "Options"); + case "enum": + if (prop.Name != "fontFamily" && prop.Name != "cursor") + { + Console.WriteLine($"WARNING: enum type '{prop.Name}' in '{parent.Name}' ..."); + return new SimpleType("string") + { + TypeWarning = $"enum type '{prop.Name}' in '{parent.Name}' ..." + }; + } + return new SimpleType("string"); + case "string": + return new SimpleType("string"); + case "number": + if (prop.Name.Contains("index", StringComparison.InvariantCultureIgnoreCase)) + return new SimpleType("int"); + else + return new SimpleType("double"); + case "boolean": + return new SimpleType("bool"); + // ... 50+ more cases ... + } + } + + // ... complex matching section with nested if/else ... + + // Finally, catch-all fallback + Console.WriteLine($"ERROR: Failed to map property '{prop.Name}' in type '{parent.Name}' ..."); + return new SimpleType("object") + { + TypeWarning = $"Failed to map property ..." + }; +} +``` + +### After: Clear decision tree + +```csharp +// src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs (snippet) + +private DiagnosticCollector diagnosticCollector = new(); +private TypePatternRegistry typePatternRegistry; + +protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + if (optProp.Types == null || optProp.Types.Count == 0) + throw new ArgumentException($"JSON property '{prop.Name}' could not be mapped"); + + var types = optProp.Types; + var path = $"{parent.Name}.{prop.Name}"; + + // ═════════════════════════════════════════════════════════════ + // Step 1: Primitive types (enum, string, number, boolean, etc.) + // ═════════════════════════════════════════════════════════════ + if (types.Count == 1) + { + var result = MapSingleType(parent, optProp, prop); + if (result != null) + { + diagnosticCollector.RecordSupported(path, types, result.DotNetType); + return result; + } + } + + // ═════════════════════════════════════════════════════════════ + // Step 2: Known union patterns (boolean,string → BoolOrString) + // ═════════════════════════════════════════════════════════════ + if (typePatternRegistry.TryGetMappedType(types, parent.Name, out var customType)) + { + diagnosticCollector.RecordSupported(path, types, customType!.DotNetType); + return customType; + } + + // ═════════════════════════════════════════════════════════════ + // Step 3: Partially supported (enum,function → object + typed accessors) + // ═════════════════════════════════════════════════════════════ + if (typePatternRegistry.IsPartiallySupported(types)) + { + var result = MapPartiallySupported(parent, optProp, prop); + diagnosticCollector.RecordPartiallySupported( + path, + types, + "object", + suggestion: "Use typed accessor pattern (see ObjectOrFunction)"); + return result; + } + + // ═════════════════════════════════════════════════════════════ + // Step 4: Special cases (array+object → SingleOrArrayType) + // ═════════════════════════════════════════════════════════════ + if (IsArrayAndObject(optProp) && optProp.ItemType != null) + { + var result = MapArrayAndObject(parent, optProp, prop); + if (result != null) + { + diagnosticCollector.RecordSupported(path, types, result.DotNetType); + return result; + } + } + + // ═════════════════════════════════════════════════════════════ + // Step 5: Fallback (unsupported pattern) + // ═════════════════════════════════════════════════════════════ + + // Check if pattern is known to be complex + if (typePatternRegistry.IsTrulyUnsupported(types, out var reason)) + { + diagnosticCollector.RecordUnsupported( + path, + types, + fallback: "object", + suggestion: reason); + return new SimpleType("object") + { + TypeWarning = reason + }; + } + + // Unknown pattern - flag for investigation + var suggestion = SuggestMapping(types, optProp); + diagnosticCollector.RecordUnsupported( + path, + types, + fallback: "object", + suggestion: suggestion); + + return new SimpleType("object") + { + TypeWarning = $"Pattern '{string.Join(",", types)}' not yet mapped. Suggestion: {suggestion}" + }; +} + +/// Map single type (string, number, boolean, etc.) +protected virtual IPropertyType? MapSingleType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + var type = optProp.Types![0]; + + // Try enum first + if (type == "enum") + return MapEnumType(parent, optProp, prop); + + // Primitives + return type switch + { + "string" => new SimpleType("string"), + "number" => new SimpleType(IsIndexProperty(prop.Name) ? "int" : "double"), + "boolean" => new SimpleType("bool"), + "color" => new MappedCustomType(typeof(Color)), + "function" => new MappedCustomType(typeof(JavascriptFunction)), + "object" => ParseObjectType(optProp, prop.Name, prop.Value, dataPrefix: prop.Name, typeGroup: "Options"), + "array" => typeCollection.MapArrayType(parent, optProp, prop), + "*" => null, // Handled by fallback + _ => throw new ArgumentException($"Unknown single type: {type}") + }; +} + +/// Map enum type with fallback handling +protected virtual IPropertyType? MapEnumType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + // Check TypeCollection for known enum mappings + if (typeCollection.TryGetMappedEnumType(prop.Name, parent.Name, out var mappedType)) + return mappedType; + + // Hardcoded exceptions (safe to downgrade to string) + if (prop.Name == "fontFamily" || prop.Name == "cursor") + return new SimpleType("string"); + + // Unknown enum - record diagnostic with actionable suggestion + var suggestion = $"Add enum mapping to TypeCollection:\n" + + $" AddMappedEnumType(new MappedEnumType(\"{prop.Name}\", typeof(???)), \"{parent.Name}\");"; + + diagnosticCollector.RecordUnsupported( + $"{parent.Name}.{prop.Name}", + new() { "enum" }, + fallback: "string", + suggestion: suggestion); + + return new SimpleType("string") + { + TypeWarning = suggestion + }; +} + +/// Generate typed accessor pattern for partially supported types +protected virtual IPropertyType? MapPartiallySupported(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + // For enum,function pattern: return object but mark for typed accessor generation + if (optProp.Types.OrderBy(t => t).SequenceEqual(new[] { "enum", "function" })) + { + return new EnumOrFunctionType(GetEnumTypeForPartial(parent, optProp, prop)); + } + + // Default fallback + return new SimpleType("object") + { + TypeWarning = $"Partially supported pattern: {string.Join(",", optProp.Types)}" + }; +} + +/// Suggest what custom type should be created +private string SuggestMapping(List types, OptionProperty optProp) +{ + var typeStr = string.Join(",", types.OrderBy(t => t)); + + if (types.Count == 2 && !types.Contains("*")) + { + return $"Create custom type: 'Union{string.Join("Or", types.OrderBy(t => t).Select(Capitalize))}'"; + } + + if (types.Contains("enum") && optProp.EnumOptions?.Length > 0) + { + return $"Auto-generate enum type for values: {{{string.Join(", ", optProp.EnumOptions)}}}"; + } + + return $"Pattern '{typeStr}' is too complex - may require manual implementation"; +} + +private bool IsIndexProperty(string name) + => name.Contains("index", StringComparison.InvariantCultureIgnoreCase); + +private string Capitalize(string s) + => s.Length > 0 ? char.ToUpper(s[0]) + s.Substring(1) : s; +``` + +--- + +## Part 3: Using the Improved System + +### Adding a New Pattern to TypePatternRegistry + +```csharp +// Before: Manually add case to MapType() +// (time-consuming, error-prone) + +// After: 1. Create custom type in Vizor.ECharts/Types/ +// src/Vizor.ECharts/Types/EnumOrNumberArray.cs +public class EnumOrNumberArray where T : Enum +{ + public T? EnumValue { get; set; } + public double[]? NumberArray { get; set; } + public double? SingleNumber { get; set; } + // ... JsonConverter implementation ... +} + +// 2. Register in TypePatternRegistry +var SupportedPatterns = new Dictionary +{ + // ... existing patterns ... + { "array,enum,number", typeof(EnumOrNumberArray<>) }, // ← Add 1 line +}; + +// Done! Generator will now use it automatically. +``` + +### Reading the Diagnostic Report + +```markdown +# Type Pattern Analysis Report + +## Unsupported Patterns + +### array,enum,number (5 occurrences) +Examples: CrossStyle.type, ParallelSeriesData.type, ... +**Action**: Create custom type: 'UnionArrayEnumNumber' + +### boolean,object (3 occurrences) +Examples: ScatterSeries.symbolKeepAspect, ... +**Action**: Too complex - keep as object? with typed accessors + +## Summary +- Total properties: 1,247 +- Fully supported: 1,195 (95.8%) +- **Action items**: 15 patterns (1.2%) +``` + +--- + +## Part 4: Test Examples + +### TypePatternAnalysisTests.cs + +```csharp +[TestClass] +public class TypePatternAnalysisTests +{ + [TestMethod] + public void GenerateTypePatternAnalysisReport() + { + // Load option.json + var json = File.ReadAllText("option.json"); + var doc = JsonDocument.Parse(json); + + // Run generator phases + var typeCollection = new TypeCollection(); + var diagnosticCollector = new DiagnosticCollector(); + var phase1 = new Phase1Generator(typeCollection, diagnosticCollector); + + phase1.Run(doc.RootElement); + + // Generate report + var report = diagnosticCollector.GenerateReport(); + + // Assertions + Assert.IsTrue(report.SupportedCount > 0); + Assert.IsTrue(report.UnsupportedCount < 50); // Less than 4% unsupported + + // Save report + File.WriteAllText( + "TypePatternAnalysisReport.md", + report.ToMarkdown()); + + Console.WriteLine($"✓ Report generated: {report.SupportedCount} supported, {report.UnsupportedCount} unsupported"); + } +} +``` + +--- + +## Summary of Changes + +| File | Change | Impact | +|------|--------|--------| +| `TypeMappingDiagnostic.cs` | NEW | Structured diagnostic data | +| `DiagnosticCollector.cs` | NEW | Collects all mapping decisions | +| `TypePatternRegistry.cs` | NEW | Centralizes pattern knowledge | +| `BasePhase.cs` | REFACTOR | Clear decision tree, calls diagnostics | +| `MapType()` | SIMPLIFY | From 100+ lines → 60 with clear steps | +| Generated code | IMPROVE | No `//TODO` comments (or minimal) | +| Reports | NEW | Analysis-driven improvement planning | + +**Total new infrastructure**: ~600 lines +**Benefits**: 10x clearer code, 100% diagnoistic coverage, extensible pattern system diff --git a/doc/Generator_Improvement_Plan.md b/doc/Generator_Improvement_Plan.md new file mode 100644 index 00000000..2f65ddf4 --- /dev/null +++ b/doc/Generator_Improvement_Plan.md @@ -0,0 +1,440 @@ +# Generator Improvement Plan: Comprehensive Type Mapping + +> **Note**: This document focuses on **type mapping completeness**. For code quality improvements (refactoring, logging, error handling), see [Generator_Code_Quality_Improvements.md](Generator_Code_Quality_Improvements.md). + +## Goal +Generate strong types for **all** ECharts properties, eliminating `object` fallbacks (except truly dynamic cases) and providing clear diagnostics for unsupported type patterns. + +--- + +## Current State Analysis + +### Fallback Points (Need Fixing) +From [BasePhase.cs](../src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs) `MapType()`: + +1. **Line 295**: `case "*"` → returns `object` (wildcard types) +2. **Line 218-223**: Unmapped enums → downgrades to `string` with warning +3. **Line 318**: Unmapped arrays → returns `List` with warning +4. **Line 290-294**: Enum+Function pattern → falls to `object` when enum type unknown +5. **Line 333-338**: Final catch-all → returns `object` for unmapped patterns + +### Known Issues +- **Warnings scattered in console** (not aggregated or tracked) +- **Type warnings embedded in generated code** as `//TODO:` comments (not discoverable) +- **No central registry** of what's supported vs. needs investigation +- **Enum type failures** silently downgrade to `string` (fontFamily/cursor exceptions hardcoded) +- **No diagnostic report** showing which patterns block full generation + +### Existing Infrastructure to Leverage +- `IPropertyType.TypeWarning` property already present +- [ObjectTypeClassGenerator.cs](../src/Vizor.ECharts.BindingGenerator/Generators/ObjectTypeClassGenerator.cs) already writes warnings as comments +- [warnings.txt](../src/Vizor.ECharts.BindingGenerator/warnings.txt) collects some output +- Test analysis infrastructure in [ManualImplementationAnalysisTests.cs](../src/Vizor.ECharts.Tests/Unit/Generator/ManualImplementationAnalysisTests.cs) + +--- + +## Phase 1: Type Categorization System + +### 1.1 Create Diagnostic Infrastructure + +**New file**: `src/Vizor.ECharts.BindingGenerator/Diagnostics/TypeMappingDiagnostic.cs` + +```csharp +internal class TypeMappingDiagnostic +{ + public string PropertyPath { get; set; } // "ParentType.PropertyName" + public List Types { get; set; } // ["string", "number", "array"] + public DiagnosticLevel Level { get; set; } + public string Message { get; set; } + public string? Suggestion { get; set; } // "Use NumberOrString" +} + +internal enum DiagnosticLevel +{ + Supported, // Fully mapped + PartiallySupported, // Falls back to typed accessor + Unsupported, // Falls to object/string + RequiresInvestigation // New pattern not yet analyzed +} +``` + +**New file**: `src/Vizor.ECharts.BindingGenerator/Diagnostics/DiagnosticCollector.cs` + +```csharp +internal class DiagnosticCollector +{ + private readonly List diagnostics = new(); + + public void RecordSupported(string path, List types) { } + public void RecordPartiallySupported(string path, List types, string fallback) { } + public void RecordUnsupported(string path, List types, string? suggestion = null) { } + + public DiagnosticReport GenerateReport() { } +} +``` + +### 1.2 Create Type Pattern Registry + +**New file**: `src/Vizor.ECharts.BindingGenerator/Types/TypePatternRegistry.cs` + +Centralize all type mapping knowledge: + +```csharp +internal class TypePatternRegistry +{ + // Fully supported patterns (1-element types) + private readonly HashSet primitiveTypes = new() { "string", "number", "boolean", "object", "color", "function", "array", "*" }; + + // Enum mappings (already in TypeCollection) + public bool TryGetEnumMapping(string propName, string parentName, out MappedEnumType enumType) { } + + // Custom union types (2+ elements) + private readonly Dictionary supportedPatterns = new() + { + { "boolean,number", typeof(NumberOrBool) }, + { "boolean,string", typeof(BoolOrString) }, + { "number,string", typeof(NumberOrString) }, + // ... all existing patterns + }; + + // Partially supported (typed accessor needed) + private readonly HashSet needsTypedAccessor = new() + { + { "enum,function" }, // FunnelSeries.sort - has typed accessors + // ... others + }; + + // Not yet supported + private readonly HashSet unsupported = new(); + + public bool IsSupported(List types, out IPropertyType mappedType) { } + public bool IsPartiallySupported(List types, string parentName) { } + public bool IsUnsupported(List types, out string reason) { } +} +``` + +--- + +## Phase 2: Refactor MapType() for Clarity + +### 2.1 Restructure Decision Logic + +Replace the large `MapType()` method with decision branches: + +```csharp +protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + var types = optProp.Types ?? new(); + + // 1. Single type → simple mapping + if (types.Count == 1) + return MapSingleType(parent, optProp, prop); + + // 2. Known union pattern → custom type + if (typePatternRegistry.TryGetPattern(types, out var customType)) + return customType; + + // 3. Partially supported → typed accessor + if (typePatternRegistry.IsPartiallySupported(types, parent.Name)) + return MapPartiallySupported(parent, optProp, prop); + + // 4. Unknown pattern → diagnostic + decision + diagnosticCollector.RecordUnsupported( + $"{parent.Name}.{prop.Name}", + types, + suggestion: SuggestMapping(types, optProp)); + + return GetFallbackType(types, parent, prop); // object or specific typed accessor +} +``` + +### 2.2 Extract Single-Type Mapping + +```csharp +protected virtual IPropertyType? MapSingleType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + var type = optProp.Types![0]; + + switch (type) + { + case "string": return new SimpleType("string"); + case "number": return new SimpleType(IsIndexProperty(prop.Name) ? "int" : "double"); + case "boolean": return new SimpleType("bool"); + case "color": return new MappedCustomType(typeof(Color)); + case "function": return new MappedCustomType(typeof(JavascriptFunction)); + case "enum": return MapEnumType(parent, optProp, prop); + case "array": return typeCollection.MapArrayType(parent, optProp, prop); + case "*": + diagnosticCollector.RecordUnsupported($"{parent.Name}.{prop.Name}", new() { "*" }); + return new SimpleType("object"); + } + + throw new ArgumentException($"Unknown single type: {type}"); +} +``` + +### 2.3 Dedicated Enum Mapping + +```csharp +protected virtual IPropertyType? MapEnumType(ObjectType parent, OptionProperty optProp, JsonProperty prop) +{ + if (typeCollection.TryGetMappedEnumType(prop.Name, parent.Name, out var enumType)) + return enumType; + + // Known exceptions (safe to downgrade) + if (prop.Name == "fontFamily" || prop.Name == "cursor") + return new SimpleType("string"); + + // Unknown enum → diagnostic + fallback + diagnosticCollector.RecordUnsupported( + $"{parent.Name}.{prop.Name}", + new() { "enum" }, + suggestion: $"Add enum mapping: AddMappedEnumType(new(\"{prop.Name}\", typeof(???)), \"{parent.Name}\");"); + + return new SimpleType("string"); +} +``` + +--- + +## Phase 3: Pattern Discovery & Documentation + +### 3.1 Build Pattern Analysis Test + +**New test**: `src/Vizor.ECharts.Tests/Unit/Generator/TypePatternAnalysisTests.cs` + +```csharp +[TestMethod] +public void AnalyzeAllTypePatterns() +{ + // Run generator on option.json + // Collect diagnostics + // Group by pattern + // Report on: + // - Fully supported: 85 patterns + // - Partially supported: 5 patterns (need typed accessor) + // - Unsupported: 12 patterns (need custom types) + // - Requires investigation: 3 patterns (edge cases) + + var report = diagnosticCollector.GenerateReport(); + File.WriteAllText("TypePatternAnalysisReport.md", report.ToMarkdown()); +} +``` + +### 3.2 Pattern Suggestion Engine + +```csharp +private string SuggestMapping(List types, OptionProperty optProp) +{ + var typeStr = string.Join(",", types); + + if (types.Count == 2) + { + var key = string.Join(",", types.OrderBy(t => t)); + + // Check if custom type should exist + if (!ShouldBeObject(key)) + return $"Create custom type 'Union{key.Replace(",", "Or")}' (see pattern examples in doc/Manual_Implementation_Analysis.md)"; + } + + if (types.Contains("enum") && optProp.EnumOptions?.Length > 0) + return $"Auto-generate enum: {{{string.Join(", ", optProp.EnumOptions)}}}"; + + return "Too complex for automation - requires manual implementation or typed accessor"; +} + +private bool ShouldBeObject(string pattern) +{ + // Patterns that are legitimately too complex + var reallyComplex = new[] { "enum,function", "*,number", "date,object,string" }; + return reallyComplex.Contains(pattern); +} +``` + +--- + +## Phase 4: Implementation Strategy + +### 4.1 Execution Order + +**Week 1**: Diagnostics foundation +- [ ] Create `DiagnosticCollector` and `TypeMappingDiagnostic` +- [ ] Create `TypePatternRegistry` with all known patterns +- [ ] Add diagnostics calls to `MapType()` (minimal changes) + +**Week 2**: Refactor MapType() +- [ ] Extract `MapSingleType()` +- [ ] Extract `MapEnumType()` +- [ ] Extract `MapPartiallySupported()` +- [ ] Reorganize with clear decision tree + +**Week 3**: Analysis & reporting +- [ ] Build pattern discovery test +- [ ] Generate report of all patterns +- [ ] Document patterns by category +- [ ] Suggest concrete next patterns to implement + +**Week 4**: Close gaps +- [ ] Implement highest-priority custom types +- [ ] Add enum mappings for missing patterns +- [ ] Update TypeCollection with new patterns + +### 4.2 Success Criteria + +- [ ] All types categorized (Supported / Partially Supported / Unsupported / Investigation) +- [ ] Zero console output (all diagnostics collected, not printed) +- [ ] Generated code has no `//TODO: Type Warning` comments +- [ ] Report shows improvement: `Unsupported: 0` (or near-zero with documented rationale) +- [ ] New developers can follow: "If property isn't supported, see TypePatternAnalysisReport.md" + +--- + +## Phase 5: Handling Truly Unsupported Cases + +### 5.1 Categories That Must Remain `object` + +```csharp +/// +/// Patterns too complex for strong typing (requires manual accessor pattern). +/// Keep as 'object?' in generated code; provide typed accessors manually. +/// +private readonly HashSet mustRemainObject = new() +{ + "enum,function", // FunnelSeries.sort - needs both enum AND function + "*,number", // itemGap - truly ambiguous + "date,object,number,string" // Too many variations +}; +``` + +For these, generate: +```csharp +/// +/// [UNSUPPORTED PATTERN: enum,function] +/// Cannot be strongly typed. Use typed accessor pattern: +/// public MyEnum? TypeAsEnum { get; set; } +/// public JavascriptFunction? TypeAsFunction { get; set; } +/// +[JsonPropertyName("type")] +public object? Type { get; set; } + +[JsonIgnore] +public MyEnum? TypeAsEnum +{ + get => Type as MyEnum; + set => Type = value; +} + +[JsonIgnore] +public JavascriptFunction? TypeAsFunction +{ + get => Type as JavascriptFunction; + set => Type = value; +} +``` + +--- + +## Deliverables + +### Generated Files +1. `TypeMappingDiagnostic.cs` - Diagnostic type +2. `DiagnosticCollector.cs` - Collection & reporting +3. `TypePatternRegistry.cs` - Central pattern knowledge +4. `TypePatternAnalysisReport.md` - Pattern categorization +5. Refactored `BasePhase.cs` - Clear decision logic + +### Documentation +- **doc/Generator_Improvement_Plan.md** (this file) +- **doc/TypePatternAnalysisReport.md** (auto-generated from test) +- **doc/TypePatternsGuide.md** - How to add new patterns +- Updated `IMPROVEMENTS.md` with generator progress + +### Test Coverage +- `TypePatternAnalysisTests.cs` - Pattern discovery +- `DiagnosticCollectorTests.cs` - Diagnostic collection +- Generator regression tests (ensure existing patterns still work) + +--- + +## Quick Reference: Existing Custom Types + +**Already Supported** (in `src/Vizor.ECharts/Types/`): +- `NumberOrBool` +- `BoolOrString` +- `NumberOrString` +- `NumberOrNumberArray` +- `StringOrFunction` +- `NumberOrFunction` +- `ObjectOrFunction` +- `ColorOrFunction` +- `NumberOrStringOrFunction` +- `NumberArrayOrFunction` +- `NumberArray` +- `ColorArray` +- `NumberOrStringArray` +- `SingleOrArrayType` (Grid, XAxis, YAxis pattern) +- `EnumOrFunctionType` (exists but incomplete) + +**Need Implementation**: +- `EnumOrArray` (array + enum) +- `EnumOrNumber` (enum + number) +- More as discovered in analysis phase + +--- + +## Integration Points + +- **Enum mappings** feed from `TypeCollection.AddMappedEnumType()` calls +- **Custom types** discovered in `src/Vizor.ECharts/Types/` via reflection +- **Generated code** uses diagnostics to add helpful comments +- **Test infrastructure** already exists in `ManualImplementationAnalysisTests.cs` + +--- + +## Risk Mitigation + +| Risk | Mitigation | +|------|-----------| +| Refactoring breaks generation | Add comprehensive tests before refactor; keep old logic as fallback | +| Report overwhelms with noise | Filter diagnostics by level; focus on "Unsupported" only | +| Missed patterns | Automated pattern discovery; test against all real options | +| Backward compatibility | New system is additive; old warnings still work | + +--- + +## Future Improvements + +### Use Arrays for Static Configuration Data + +**Rationale**: Many ECharts properties contain static configuration data that is set once during initialization and rarely modified. Using arrays instead of Lists would: +- Reduce memory overhead (no List capacity management) +- Improve cache locality and serialization performance +- Better convey immutability intent +- More idiomatic for read-only configuration + +**Affected Properties**: +- `Legend.Data` → change `List?` to `LegendData[]?` +- All axis `Data` properties → change `List?` to `AxisData[]?` in: + - `XAxis.Data` + - `YAxis.Data` + - `AngleAxis.Data` + - `RadiusAxis.Data` + - `ParallelAxis.Data` + - `SingleAxis.Data` +- Consider other static data collections (series data arrays, radar indicators, etc.) + +**Implementation**: +- Add logic in generator to detect "data" properties and emit arrays instead of Lists +- Alternatively, add explicit property mappings in BasePhase for known static data types +- Breaking change - requires updates to all sample/test code + +**Priority**: Medium (quality-of-life improvement, not blocking functionality) + +--- + +## Next Steps + +1. **Review & validate** this plan with team +2. **Start Phase 1** (Diagnostics foundation) +3. **Weekly sync** on analysis results +4. **Prioritize** custom type implementations based on usage frequency diff --git a/doc/Generator_Improvement_Summary.md b/doc/Generator_Improvement_Summary.md new file mode 100644 index 00000000..b16f11c6 --- /dev/null +++ b/doc/Generator_Improvement_Summary.md @@ -0,0 +1,213 @@ +# Generator Improvement: Visual Summary + +## The Problem + +``` +Current Flow (Messy): +┌─────────────────────────────────────────────────────────────────┐ +│ MapType() - 100+ lines with nested conditions │ +├─────────────────────────────────────────────────────────────────┤ +│ if (enum) → check TypeCollection → silent fallback to string │ +│ if (array) → check items → fallback to List │ +│ if (2-type pattern) → check 50+ specific cases │ +│ if (...) → ... more patterns ... │ +│ else → FALLBACK TO OBJECT + generate //TODO comment │ +└─────────────────────────────────────────────────────────────────┘ + ↓ + ⚠️ Warnings scattered in console (lost) + ⚠️ Type issues buried in generated code comments + ⚠️ No central registry of what's supported + ⚠️ Hard to add new patterns + ⚠️ Developers don't know what's missing +``` + +## The Solution + +``` +Improved Flow (Clear & Extensible): +┌────────────────────────────────────────┐ +│ TypePatternRegistry │ +│ • Primitive types │ +│ • Enum mappings (from TypeCollection) │ +│ • Supported patterns (boolean,string) │ +│ • Partially supported (enum,function) │ +│ • Unsupported patterns │ +└────────────────────────────────────────┘ + ↑ ↑ + │ │ +┌────────┴────────────────────────┴──────┐ +│ DiagnosticCollector │ +│ • Records all mapping decisions │ +│ • Categorizes by support level │ +│ • Groups by pattern for analysis │ +│ • Generates detailed report │ +└────────────────────────────────────────┘ + ↑ +┌────────┴────────────────────────────────┐ +│ Refactored MapType() │ +│ │ +│ if (single type) → MapSingleType() │ +│ if (known pattern) → return custom │ +│ if (partially supported) → typed acc │ +│ else → diagnostic + smart fallback │ +│ │ +│ Zero console noise ✓ │ +│ All decisions logged ✓ │ +│ Easy to extend ✓ │ +└────────────────────────────────────────┘ + ↓ + Generated Code + Analysis Report + • No //TODO comments (or minimal) + • Type patterns documented + • Actionable suggestions for unsupported +``` + +## Type Support Matrix + +``` +FULLY SUPPORTED (Map to Custom Types) +├─ Single primitives: string, number, boolean, object +├─ Color & Function: color → Color, function → JavascriptFunction +├─ Known patterns: +│ ├─ number,boolean → NumberOrBool +│ ├─ boolean,string → BoolOrString +│ ├─ number,string → NumberOrString +│ ├─ array,number → NumberOrNumberArray +│ ├─ (13 more in Types/ folder) +│ └─ array,object (Grid/XAxis) → SingleOrArrayType +│ +PARTIALLY SUPPORTED (Typed Accessors Generated) +├─ enum,function → EnumOrFunctionType (obj? + typed getter/setter) +├─ Custom transforms (anyOf pattern) +│ +UNSUPPORTED (Known Limitations) +├─ *,number (truly ambiguous) → object? + warning +├─ Date + 3 types (too many options) → object? + typed accessors +│ +REQUIRES INVESTIGATION (New Discovery) +├─ array,enum,number → ??? (ShouldBe EnumOrNumberArray?) +├─ ... others discovered in analysis phase ... + +``` + +## Implementation Timeline + +``` +Week 1: Foundation +┌─────────────────────────────────────┐ +│ Create diagnostic infrastructure │ Minimal risk +│ • DiagnosticCollector │ No changes to generation +│ • TypeMappingDiagnostic │ Non-blocking +│ • TypePatternRegistry │ +└─────────────────────────────────────┘ + ↓ +Week 2: Refactor +┌─────────────────────────────────────┐ +│ Restructure MapType() │ Medium risk +│ • Extract single-type branch │ Need comprehensive tests +│ • Extract enum branch │ Keep old logic as fallback +│ • Extract union pattern branch │ +│ • Add diagnostic calls │ +└─────────────────────────────────────┘ + ↓ +Week 3: Analysis +┌─────────────────────────────────────┐ +│ Generate pattern report │ No generation impact +│ • Run on real option.json │ Pure analysis +│ • Group patterns by category │ Informs next steps +│ • Suggest improvements │ +└─────────────────────────────────────┘ + ↓ +Week 4: Close Gaps +┌─────────────────────────────────────┐ +│ Implement high-priority patterns │ Incremental +│ • New custom types │ Add one at a time +│ • Additional enum mappings │ Test each addition +│ • Typed accessor patterns │ Document in guide +└─────────────────────────────────────┘ +``` + +## Diagnostic Report Example + +```markdown +# Type Pattern Analysis Report +Generated: 2025-12-31 + +## Summary +- Total properties analyzed: 1,247 +- Fully supported: 1,195 (95.8%) +- Partially supported: 32 (2.6%) +- Unsupported (needs investigation): 15 (1.2%) +- Truly unsupported (acceptable): 5 (0.4%) + +## Unsupported Patterns Requiring Action + +### 1. array,enum,number (5 occurrences) +**Examples**: crossStyle.type, ... +**Current behavior**: Falls to object +**Suggestion**: Create EnumOrNumberArray custom type +**Effort**: 2-3 hours +**Priority**: High (blocks crossStyle rendering) + +### 2. [other patterns...] + +## Mapping Reference +- Fully supported: 85 distinct patterns +- Known 2-3 type unions: 47 patterns +- Single types: 38 patterns +``` + +## Key Files Structure + +``` +src/Vizor.ECharts.BindingGenerator/ +├── Phases/ +│ └── BasePhase.cs (refactored - clearer decision tree) +├── Diagnostics/ (NEW) +│ ├── TypeMappingDiagnostic.cs +│ ├── DiagnosticCollector.cs +│ └── DiagnosticReport.cs +├── Types/ +│ ├── TypePatternRegistry.cs (NEW - centralized patterns) +│ ├── IPropertyType.cs (no change) +│ └── [existing types] +│ +src/Vizor.ECharts.Tests/ +└── Unit/Generator/ + ├── TypePatternAnalysisTests.cs (NEW) + ├── DiagnosticCollectorTests.cs (NEW) + └── ManualImplementationAnalysisTests.cs (unchanged) + +doc/ +├── Generator_Improvement_Plan.md (THIS FILE - detailed plan) +├── TypePatternAnalysisReport.md (AUTO-GENERATED - results) +└── TypePatternsGuide.md (HOW-TO - add new patterns) +``` + +## Success Metrics + +| Metric | Current | Target | Status | +|--------|---------|--------|--------| +| Types falling back to `object` | ~12 | ~3 | ⏳ Pending | +| `object?` properties with typed accessors | Unknown | 100% | ⏳ Pending | +| Generation diagnostics clarity | Low (warnings scattered) | High (report-based) | ⏳ Pending | +| Time to add new pattern | 30+ min (find code) | 10 min (follow guide) | ⏳ Pending | +| Unsupported patterns documented | No | Yes (analysis report) | ⏳ Pending | + +## Risk Assessment + +| Risk | Likelihood | Impact | Mitigation | +|------|------------|--------|-----------| +| Refactor breaks existing generation | Medium | High | Comprehensive unit tests first | +| Analysis shows too many unsupported | Low | Medium | Plan fallback typed accessor gen | +| Developers don't adopt new system | Low | Low | Clear guide + examples | +| Performance regression (diagnostics) | Low | Low | Profile; diagnostic collection is O(n) | + +## Expected Outcomes + +✅ **Clear visibility** into type support status +✅ **Actionable diagnostics** (report tells you exactly what to do) +✅ **Maintainable code** (decision tree instead of giant switch) +✅ **Extensible pattern system** (add new custom type → 1 line in registry) +✅ **Future-proof** (ready for ECharts upgrades) +✅ **Zero fallback surprises** (all decisions logged and reported) diff --git a/doc/Manual_Implementation_Analysis.md b/doc/Manual_Implementation_Analysis.md new file mode 100644 index 00000000..08f2c1b3 --- /dev/null +++ b/doc/Manual_Implementation_Analysis.md @@ -0,0 +1,206 @@ +# Manual Implementation Analysis + +This document analyzes manual implementations in Vizor.ECharts that were added outside of the Generator, and evaluates whether they could be automated. + +## Executive Summary + +**Key Findings:** +- **17 out of 22 unmapped properties** have manual implementations in the codebase +- **13 custom union types** exist in `Types/` folder to handle complex type patterns +- **11 out of 12 unmapped patterns** are potentially automatable with Generator improvements +- **18 type combination patterns** are currently automated by the Generator + +## Manual Implementation Patterns + +### 1. Union Types (Types/ Folder) + +The project has **13 manually-implemented union types** to handle complex ECharts type combinations: + +**Already in Generator's pattern matching:** +- `NumberOrBool` - handles `boolean,number` +- `NumberOrString` - handles `number,string` +- `NumberOrNumberArray` - handles `array,number` +- `StringOrFunction` - handles `function,string` +- `NumberOrFunction` - handles `function,number` +- `ObjectOrFunction` - handles `function,object` +- `ColorOrFunction` - handles `color,function` +- `NumberOrStringOrFunction` - handles `function,number,string` +- `NumberArrayOrFunction` - handles `array,function,number` +- `NumberArray` - handles `array,number,vector` +- `ColorArray` - handles `array,color` + +**NOT in Generator's pattern matching** (could be added): +- `StringArray` - could automate `array,string` pattern +- `NumberOrStringArray` - could automate `array,number,string` pattern + +### 2. Object with Typed Accessors Pattern + +Found **10 properties** using the `object? XyzObject` + `[JsonIgnore]` typed accessor pattern: + +| File | Property | Purpose | +|------|----------|---------| +| `Options/CrossStyle.cs` | `TypeObject` | Union of `LineType` enum OR `number[]` | +| `Options/ChartOptions.cs` | `GridObject` | Single `Grid` OR `List` | +| `Options/ChartOptions.cs` | `XAxisObject` | Single `XAxis` OR `List` | +| `Options/ChartOptions.cs` | `VisualMapObject` | Various visual map types | +| `Options/ChartOptions.cs` | `CalendarObject` | Single OR array of calendars | +| `Options/Dataset.cs` | `TransformObject` | Transform configuration | +| `Options/EmptyCircleStyle.cs` | `BorderTypeObject` | Line type OR number array | +| `Series/Parallel/ParallelSeriesData.cs` | `TypeObject` | Line type variants | +| `Series/Sunburst/SunburstSeries.cs` | `SortObject` | Enum OR `JavascriptFunction` | +| `Series/Funnel/FunnelSeries.cs` | `SortObject` | Enum OR `JavascriptFunction` | + +**Pattern:** +```csharp +[JsonPropertyName("sort")] +[DefaultValue("descending")] +public object? SortObject { get; set; } + +[JsonIgnore] +public FunnelSortOrder? Sort +{ + get => (FunnelSortOrder?)SortObject; + set => SortObject = value; +} + +[JsonIgnore] +public JavascriptFunction? SortFunction +{ + get => SortObject as JavascriptFunction; + set => SortObject = value; +} +``` + +This pattern is necessary when: +- The union includes both an enum and a function +- The union includes both a single object and array of objects +- Complex type combinations that can't be handled by simple union types + +## Generator Coverage Analysis + +### Currently Automated Patterns (18) + +The Generator's `BasePhase.cs` already handles these type combinations: + +``` +array,color → ColorArray +array,function,number → NumberArrayOrFunction +array,number → NumberOrNumberArray +array,number,vector → NumberArray +array,percentvector → double[] +array,string → MappedEnumType (Icon) +array,vector → double[] +boolean,number → NumberOrBool +color,function → ColorOrFunction +color,number → double +date,number,string → NumberOrString +function,icon,string → StringOrFunction +function,number → NumberOrFunction +function,number,string → NumberOrStringOrFunction +function,object → ObjectOrFunction +function,string → StringOrFunction +icon,string → MappedEnumType (Icon) +number,string → NumberOrString +``` + +### Unmapped Patterns (12) + +These patterns currently fall back to `object?` and require manual implementation: + +| Pattern | Occurrences | Examples | Automation Recommendation | +|---------|-------------|----------|---------------------------| +| `array,enum,number` | 5 | `crossStyle.type` | ✅ Create `EnumOrNumberOrArray` | +| `boolean,string` | 2 | `SliderDataZoom.showDataShadow`, `TreemapSeries.nodeClick` | ✅ Create `BoolOrString` | +| `array,enum` | 2 | `dayLabel.nameMap`, `monthLabel.nameMap` | ✅ Create `EnumOrArray` | +| `enum,function` | 2 | `SunburstSeries.sort`, `FunnelSeries.sort` | ⚠️ Keep as `object?` (enum + function requires typed accessors) | +| `prefix` | 3 | `label.rotate` | ⚠️ Special type, may require custom handling | +| `*,number` | 1 | `PiecewiseVisualMap.itemGap` | ❌ Wildcard type, keep as `object?` | +| `array,number,string` | 1 | `calendar.range` | ✅ Could add to Generator (3-type union) | +| `array,object` | 1 | `dataset.source` | ❌ Too generic, keep as `object?` | +| `enum,number` | 1 | `areaStyle.origin` | ✅ Create `EnumOrNumber` | +| `boolean,object` | 1 | `PieSeries.emptyCircleStyle` | ⚠️ Use typed accessor pattern | +| `array,boolean,number` | 1 | `GraphSeries.autoCurveness` | ✅ Existing: `AutoCurveness` class | +| `number,percentvector,string` | 1 | `PictorialBarSeries.symbolMargin` | ❌ Complex 3-type union, keep as `object?` | + +**Legend:** +- ✅ Can be automated in Generator +- ⚠️ Requires special handling (typed accessor pattern) +- ❌ Too complex or rare, manual implementation recommended + +## Recommendations for Generator Improvements + +### High Priority (Automatable) + +1. **Add `BoolOrString` type** (2 occurrences) + ```csharp + public class BoolOrString + { + public bool? Bool { get; } + public string? String { get; } + // ... implicit operators + } + ``` + Map to: `("boolean", "string")` + +2. **Add `EnumOrArray` generic type** (2 occurrences) + - Handles `array,enum` pattern + - Similar to existing `ColorArray` but for enum types + +3. **Add mapping for `array,enum,number`** (5 occurrences) + - Most common unmapped pattern + - Could create `EnumOrNumberOrArray` generic type + +### Medium Priority + +4. **Register `StringArray` in Generator** (already implemented in Types/) + - Map `array,string` → `StringArray` when not used as enum + +5. **Register `NumberOrStringArray` in Generator** (already implemented) + - Map `array,number,string` → `NumberOrStringArray` + +6. **Add `EnumOrNumber` generic** (1 occurrence) + - Map `enum,number` → `EnumOrNumber` + +### Low Priority (Keep Manual) + +7. **`enum,function` pattern** - Keep using `object?` with typed accessors + - Requires both enum property and `JavascriptFunction` property + - Current manual implementation is appropriate + +8. **Wildcard and complex unions** - Keep as `object?` + - `*,number` (wildcard) + - `array,object` (too generic) + - `number,percentvector,string` (rare complex union) + +## Implementation Status + +✅ **17/22 unmapped properties have manual implementations** +- All 22 properties appear in generated code as fallback types (`object?`, `string`) +- 17 have additional manual implementations (typed accessors, custom types) +- 0 properties are completely missing (skipped) + +This demonstrates that the Generator successfully produces compilable code even for unmapped patterns, falling back to safe types like `object?` and `string`. + +## Next Steps + +1. **Test before ECharts 6 upgrade** + - Current test suite (35 tests) provides baseline + - Manual implementations are documented + +2. **Consider Generator improvements** + - Add `BoolOrString`, `EnumOrArray`, `EnumOrNumberOrArray` + - Register existing `StringArray` and `NumberOrStringArray` types + - Update `BasePhase.cs` pattern matching + +3. **Monitor warnings.txt** + - Track new unmapped patterns in ECharts 6 + - Evaluate if they follow existing patterns + +## Files Changed for Analysis + +- `src/Vizor.ECharts.Tests/Unit/Generator/ManualImplementationAnalysisTests.cs` + - `FindUnionTypePropertiesWithObject` - Finds object + accessor pattern + - `AnalyzeCustomTypesInTypesFolder` - Lists all union types + - `MapWarningsToManualImplementations` - Cross-references warnings with code + - `AnalyzeGeneratorMappingPatterns` - Lists current Generator capabilities + - `RecommendGeneratorImprovements` - Provides actionable recommendations diff --git a/doc/Node_Build_Toolchain.md b/doc/Node_Build_Toolchain.md new file mode 100644 index 00000000..7b69d1e8 --- /dev/null +++ b/doc/Node_Build_Toolchain.md @@ -0,0 +1,54 @@ +# Node Build Toolchain Status + +This project uses Gulp to bundle the JavaScript interop assets. Current state and known issues of the build toolchain are documented here. + +## Current Dependencies (src/Vizor.ECharts/package.json) +- gulp 4.x +- del (replaces deprecated gulp-clean) +- gulp-clean-css +- gulp-concat +- gulp-minify +- gulp-postcss +- gulp-rename +- gulp-sass +- sass +- echarts, echarts-stat + +## npm audit (after cleanup) +- Remaining vulnerabilities: **13** (6 moderate, 7 high) reported by `npm audit` +- Key sources: + - **braces / micromatch / chokidar** chain (high): would require upgrading to **gulp 5** (breaking change) + - **terser via gulp-minify** (high): would require replacing/upgrading the minifier (e.g., gulp-terser) or accepting a breaking change + +## What was cleaned up +- Removed unused dev dependencies: bootstrap, child_process, gulp-cssnano, gulp-filter, gulp-sass-glob +- Replaced deprecated **gulp-clean** with **del** in gulpfile + +## Why leave as-is for now +- The vulnerabilities are in the **build toolchain**, not shipped runtime code +- Upgrading to gulp 5 and swapping minifier may require refactoring and re-testing the pipeline + +## Future Improvement Options +1. **Upgrade to gulp 5** and compatible plugins to clear the braces/chokidar chain +2. **Replace gulp-minify** with **gulp-terser** (or another maintained minifier) to address terser advisory +3. After changes, rerun `npm install` and `npm audit` to verify + +## How to reproduce the audit +```bash +cd src/Vizor.ECharts +npm audit +``` + +## Build commands +```bash +# JS assets +cd src/Vizor.ECharts +npm install +npx gulp # builds vizor-echarts.js and vizor-echarts-bundle.js + +# .NET solution +cd ../.. +dotnet restore src/Vizor.ECharts.Demo.sln +dotnet build src/Vizor.ECharts.Demo.sln --no-restore --configuration Debug +dotnet pack -c Release src/Vizor.ECharts/Vizor.ECharts.csproj +``` diff --git a/doc/Testing_Strategy.md b/doc/Testing_Strategy.md new file mode 100644 index 00000000..35a17064 --- /dev/null +++ b/doc/Testing_Strategy.md @@ -0,0 +1,632 @@ +# Testing Strategy for Vizor.ECharts + +## Overview + +This document defines the testing approach for the Vizor.ECharts library, with immediate focus on **Tier 1 (Unit Tests)** and **Tier 2 (Snapshot Tests)** to establish a reliable baseline before upgrading to ECharts 6. + +## Test Framework Selection + +**Framework: MSTest (Microsoft.VisualStudio.TestPlatform)** + +### Rationale +- **Official Microsoft platform**: Aligns with .NET 10 ecosystem and long-term support +- **Rich built-in assertions**: `Assert` class covers all common patterns without external dependencies +- **Excellent VS integration**: Deep Test Explorer support, integrated debugger, test UI +- **Snapshot support**: Can implement custom snapshot testing without third-party libraries +- **CI/CD ready**: First-class GitHub Actions support via `dotnet test` + +### Constraints +- No third-party assertion libraries (e.g., FluentAssertions, Shouldly) +- No third-party snapshot libraries (e.g., Verify, Snapshooter) +- Custom snapshot implementation required + +## Project Structure + +``` +src/Vizor.ECharts.Tests/ +├── Vizor.ECharts.Tests.csproj +├── TestFixtures/ +│ ├── ChartOptionsBuilder.cs # Fluent builders for common chart configs +│ ├── SeriesDataFixtures.cs # Test data generators +│ └── SnapshotHelper.cs # Custom snapshot management +├── Unit/ +│ ├── Serialization/ +│ │ ├── ChartOptionsSerializationTests.cs +│ │ ├── SeriesDataConverterFactoryTests.cs +│ │ ├── JavascriptFunctionSerializationTests.cs +│ │ └── ExternalDataSourceRefTests.cs +│ ├── Converters/ +│ │ ├── EnumConverterTests.cs +│ │ └── CustomConverterTests.cs +│ └── Types/ +│ └── ExternalDataSourceTests.cs +├── Snapshots/ +│ ├── ChartOptionsSerializationTests/ +│ │ ├── SerializesLineChartWithBasicOptions.json +│ │ ├── SerializesBarChartWithMultipleSeries.json +│ │ └── SerializesScatterWithExternalData.json +│ └── SeriesDataConverterFactoryTests/ +│ ├── HandlesPolymorphicSeriesData.json +│ └── ... +└── Usings.cs # Global using declarations +``` + +## Tier 1: Unit Tests (Serialization & Converters) + +### Scope +Test the C# → JSON serialization pipeline: verify that chart options serialize correctly with custom converters, handling polymorphic data, enum values, and JavaScript functions. + +### Test Categories + +#### 1.1 ChartOptions Serialization +**File**: `Unit/Serialization/ChartOptionsSerializationTests.cs` + +**Tests**: +- Basic options with title, grid, legend +- Multiple series with different types (line, bar, scatter) +- Enum properties serialize to camelCase (e.g., `Orient.Vertical` → `"vertical"`) +- Null options do not break serialization +- xAxis, yAxis with label formatters (JavaScript functions) +- Tooltip formatter (JavaScript function as string) + +**Expected Outcomes**: +```csharp +[TestMethod] +public void SerializesLineChartWithBasicOptions() +{ + // Arrange + var options = new ChartOptions + { + Title = new() { Text = "Test Chart" }, + Grid = new() { Left = "10%", Right = "10%" }, + XAxis = new() { Type = AxisType.Category }, + YAxis = new() { Type = AxisType.Value } + }; + + // Act + string json = JsonSerializer.Serialize(options, EChartBase.GetJsonSerializerOptions()); + + // Assert + Assert.IsNotNull(json); + Assert.IsTrue(json.Contains("\"title\"")); + Assert.IsTrue(json.Contains("\"Test Chart\"")); + Assert.IsTrue(json.Contains("\"xAxis\"")); +} +``` + +#### 1.2 SeriesDataConverterFactory (Polymorphic Data) +**File**: `Unit/Serialization/SeriesDataConverterFactoryTests.cs` + +**Tests**: +- `SeriesData` (numeric values) +- `SeriesData` with mixed types (arrays, objects, primitives) +- Arrays of series data objects (e.g., `List>`) +- Nested data structures (scatter with coordinates as `[x, y]` arrays) +- Custom data objects (e.g., `BarSeriesData` with `Name` and `Value`) + +**Critical**: This converter handles polymorphic data for multiple chart types; correctness is prerequisite for type upgrade. + +#### 1.3 JavascriptFunction Serialization +**File**: `Unit/Serialization/JavascriptFunctionSerializationTests.cs` + +**Tests**: +- Function stored as raw JavaScript string in JSON +- Multi-line function bodies preserved +- Template literals and arrow functions handled +- Null/empty function validation + +**Expected JSON**: +```json +{ + "tooltip": { + "formatter": "function(params) { return params[0].name + ': ' + params[0].value; }" + } +} +``` + +#### 1.4 Enum Converters +**File**: `Unit/Converters/EnumConverterTests.cs` + +**Tests**: +- `Orient.Vertical` → `"vertical"` (lowercase) +- `AxisType.Category` → `"category"` +- `AxisPointerType.Line` → `"line"` +- Unknown enum values handled gracefully (or throw with clear message) +- DefaultValue attributes respected (e.g., `AxisType.Value` not serialized if it's default) + +#### 1.5 ExternalDataSourceRef Serialization +**File**: `Unit/Serialization/ExternalDataSourceRefTests.cs` + +**Tests**: +- Reference serializes as `{ "fetchId": "ref_12345" }` +- Fetch ID generation is deterministic or consistent +- Multiple references to same `ExternalDataSource` create consistent IDs + +### Test Data Organization + +**Fixtures** (`TestFixtures/`): + +```csharp +// ChartOptionsBuilder.cs +public class ChartOptionsBuilder +{ + public static ChartOptions LineChartBasic() => new() + { + Title = new() { Text = "Line Chart" }, + XAxis = new() { Type = AxisType.Category, Data = new() { "A", "B", "C" } }, + YAxis = new() { Type = AxisType.Value }, + Series = new() { new LineSeries { Data = new(new[] { 10, 20, 30 }) } } + }; + + public static ChartOptions BarChartMultipleSeries() => new() + { + // ... + }; +} + +// SeriesDataFixtures.cs +public static class SeriesDataFixtures +{ + public static SeriesData NumericData() => + new(new[] { 10.5, 20.3, 15.8 }); + + public static List MixedData() => + new() { 10, "text", true, new[] { 1, 2 } }; +} +``` + +### Snapshot Testing Pattern (Custom Implementation) + +**File**: `TestFixtures/SnapshotHelper.cs` + +```csharp +public static class SnapshotHelper +{ + public static void AssertJsonSnapshot( + object actual, + string testName, + string methodName, + [CallerFilePath] string filePath = "") + { + // 1. Serialize actual + string json = JsonSerializer.Serialize(actual, EChartBase.GetJsonSerializerOptions()); + + // 2. Normalize both (parse and re-serialize to ensure consistent formatting) + var actualDoc = JsonDocument.Parse(json); + string normalizedActual = JsonSerializer.Serialize( + actualDoc.RootElement, + new JsonSerializerOptions { WriteIndented = true }); + + // 3. Build snapshot path: __snapshots__/ClassName.TestMethodName.json + string snapshotDir = Path.Combine( + Path.GetDirectoryName(filePath)!, + "__snapshots__", + Path.GetFileNameWithoutExtension(filePath)); + Directory.CreateDirectory(snapshotDir); + + string snapshotPath = Path.Combine(snapshotDir, $"{methodName}.json"); + + // 4. Compare or write + if (File.Exists(snapshotPath)) + { + string expected = File.ReadAllText(snapshotPath); + var expectedDoc = JsonDocument.Parse(expected); + + // Deep equality check on JSON documents + bool areEqual = JsonDocument.Parse(normalizedActual) + .RootElement.ValueEquals(expectedDoc.RootElement); + + Assert.IsTrue(areEqual, + $"Snapshot mismatch. Expected:\n{expected}\n\nActual:\n{normalizedActual}"); + } + else + { + // First run: write snapshot + File.WriteAllText(snapshotPath, normalizedActual); + } + } +} +``` + +**Usage in Test**: +```csharp +[TestMethod] +public void SerializesLineChartWithBasicOptions() +{ + var options = ChartOptionsBuilder.LineChartBasic(); + SnapshotHelper.AssertJsonSnapshot(options, "ChartOptionsSerializationTests", nameof(SerializesLineChartWithBasicOptions)); +} +``` + +--- + +## Tier 2: Snapshot Tests (Complex Chart Types) + +### Scope +Verify complete JSON output for representative chart configurations; establish baseline before ECharts 6 upgrade. + +### Test File +**File**: `Unit/Serialization/ChartTypesSnapshotTests.cs` + +### Test Coverage + +| Chart Type | Test Name | Snapshot | +|------------|-----------|----------| +| Line | SerializesLineChartWithMultipleSeries | LineChart_MultipleSeries.json | +| Bar | SerializesBarChartWithStacking | BarChart_Stacking.json | +| Scatter | SerializesScatterChartWithColorScale | ScatterChart_ColorScale.json | +| Pie | SerializesPieChartWithLabel | PieChart_Label.json | +| Gauge | SerializesGaugeChart | GaugeChart.json | +| Heatmap | SerializesHeatmapWithDataZoom | Heatmap_DataZoom.json | + +### Example: Line Chart Snapshot + +**Test**: +```csharp +[TestMethod] +public void SerializesLineChartWithMultipleSeries() +{ + // Arrange + var options = new ChartOptions + { + Title = new() { Text = "Sales by Quarter", Left = "center" }, + Legend = new() { Data = new() { "Q1", "Q2", "Q3" } }, + Grid = new() { Top = "15%", ContainLabel = true }, + XAxis = new() + { + Type = AxisType.Category, + Data = new() { "Jan", "Feb", "Mar" } + }, + YAxis = new() { Type = AxisType.Value }, + Series = new() + { + new LineSeries + { + Name = "Q1", + Data = new(new[] { 100, 120, 110 }), + Smooth = true, + Symbol = "circle" + }, + new LineSeries + { + Name = "Q2", + Data = new(new[] { 150, 140, 160 }), + Smooth = true, + Symbol = "square" + } + } + }; + + // Act & Assert + SnapshotHelper.AssertJsonSnapshot( + options, + "ChartTypesSnapshotTests", + nameof(SerializesLineChartWithMultipleSeries)); +} +``` + +**Expected Snapshot** (`__snapshots__/ChartTypesSnapshotTests/SerializesLineChartWithMultipleSeries.json`): +```json +{ + "title": { + "text": "Sales by Quarter", + "left": "center" + }, + "legend": { + "data": ["Q1", "Q2", "Q3"] + }, + "grid": { + "top": "15%", + "containLabel": true + }, + "xAxis": { + "type": "category", + "data": ["Jan", "Feb", "Mar"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "type": "line", + "name": "Q1", + "data": [100, 120, 110], + "smooth": true, + "symbol": "circle" + }, + { + "type": "line", + "name": "Q2", + "data": [150, 140, 160], + "smooth": true, + "symbol": "square" + } + ] +} +``` + +### Snapshot Management + +**CLI Flag** (optional, for regeneration after intentional changes): +```bash +UPDATE_SNAPSHOTS=true dotnet test +``` + +**Snapshot Directory**: `src/Vizor.ECharts.Tests/__snapshots__/` +**Organization**: One folder per test class, files named `{TestMethodName}.json` + +--- + +## Test Naming Conventions + +**Pattern**: `{Describes what is being tested}_{Conditions or variants}` + +Examples: +- ✅ `SerializesLineChartWithBasicOptions` +- ✅ `HandlesPolymorphicSeriesDataWithMixedTypes` +- ✅ `EnumConverterSerializesOrientVerticalToLowercase` +- ✅ `ExternalDataSourceRefGeneratesConsistentFetchId` + +--- + +## Assertion Best Practices + +**MSTest Guidelines** (enforced by MSTEST0037 analyzer): + +### 1. String Containment +```csharp +// ✅ Use specific assertions (string first, substring second) +Assert.Contains("substring to find", actualString); +Assert.DoesNotContain("unwanted substring", actualString); + +// ⚠️ Parameter order: substring FIRST, string to search SECOND +Assert.Contains("[", jsonArray); // ✅ Correct: search for "[" in jsonArray +Assert.Contains(jsonArray, "["); // ❌ Wrong: search for jsonArray in "[" + +// ❌ Avoid generic boolean checks +Assert.IsTrue(str.Contains("text")); // MSTEST0037 warning +Assert.IsFalse(str.Contains("text")); // MSTEST0037 warning +``` + +### 2. Collection Checks +```csharp +// ✅ Use specific assertions +Assert.IsNotEmpty(collection); +Assert.IsEmpty(collection); + +// ❌ Avoid +Assert.IsTrue(collection.Count > 0); // MSTEST0037 warning +Assert.IsTrue(collection.Any()); // MSTEST0037 warning +``` + +### 3. Numeric Comparisons +```csharp +// ✅ Use specific assertions (note parameter order!) +Assert.IsGreaterThan(lowerBound, actualValue); // actualValue > lowerBound +Assert.IsGreaterThanOrEqualTo(lowerBound, actualValue); // actualValue >= lowerBound +Assert.IsLessThan(upperBound, actualValue); // actualValue < upperBound +Assert.IsLessThanOrEqualTo(upperBound, actualValue); // actualValue <= upperBound + +// ❌ Avoid +Assert.IsTrue(value >= 10); // MSTEST0037 warning + +// ⚠️ CRITICAL: Parameter order is BOUND FIRST, ACTUAL VALUE SECOND +// This is the opposite of Assert.AreEqual! +Assert.IsGreaterThanOrEqualTo(10, actualValue); // ✅ Correct: tests if actualValue >= 10 +Assert.IsGreaterThanOrEqualTo(actualValue, 10); // ❌ Wrong: tests if 10 >= actualValue + +// Example: Testing collection count +Assert.IsGreaterThanOrEqualTo(10, unionTypes.Count); // ✅ Correct: Count must be >= 10 +Assert.IsGreaterThanOrEqualTo(unionTypes.Count, 10); // ❌ Wrong: 10 must be >= Count +``` + +### 4. Equality Checks +```csharp +// ✅ Use AreEqual for value comparisons +Assert.AreEqual(expected, actual); +Assert.AreEqual("Vizor.ECharts", type.Namespace); + +// ❌ Avoid +Assert.IsTrue(obj.Property == "value"); // MSTEST0037 warning +``` + +### 5. Boolean Checks +```csharp +// ✅ Use for actual boolean conditions +Assert.IsTrue(condition); +Assert.IsFalse(condition); +Assert.IsTrue(value.HasValue); // Checking nullable bool + +// ❌ Don't use for comparisons +Assert.IsTrue(a == b); // Use Assert.AreEqual instead +``` + +### 6. Null Checks +```csharp +Assert.IsNull(value); +Assert.IsNotNull(value); +``` + +### 7. JSON Structure Validation +```csharp +// Parse with JsonDocument for structure checks +var doc = JsonDocument.Parse(json); +Assert.IsTrue(doc.RootElement.TryGetProperty("series", out var series)); +Assert.AreEqual(JsonValueKind.Array, series.ValueKind); +``` + +### Why These Conventions? +- **Clearer error messages**: "Expected string to contain 'test' but it was 'other'" +- **Better IDE integration**: Tooling provides better quick fixes +- **Consistent with best practices**: Follows modern testing guidelines +- **Enforced by analyzer**: .editorconfig MSTEST0037 rule prevents violations + +--- + +## Test Data Isolation & Reusability + +### Principles +1. **No shared state**: Each test creates fresh objects +2. **Builder pattern**: Use fluent builders for common configs (see `ChartOptionsBuilder`) +3. **Fixtures**: Centralize test data generators in `TestFixtures/` +4. **No side effects**: Tests must not modify global state (e.g., `JsonSerializerOptions` cache) + +### Key Consideration: JsonSerializerOptions Caching +**Note**: `EChartBase.CacheJsonSerializerOptions` defaults to `true`. Tests must verify: +1. Same options instance used across multiple serializations +2. Cache invalidation works correctly if options change +3. Concurrent tests don't pollute cache + +**Test Example**: +```csharp +[TestMethod] +public void UsesCachedJsonSerializerOptions() +{ + var options1 = EChartBase.GetJsonSerializerOptions(); + var options2 = EChartBase.GetJsonSerializerOptions(); + + Assert.AreSame(options1, options2, "Options should be cached"); +} +``` + +--- + +## Converter Testing Guidelines + +### SeriesDataConverterFactory (Most Critical) + +This converter determines how polymorphic data in chart series is serialized. Correctness is essential before upgrading ECharts versions. + +**Test Patterns**: + +```csharp +[TestMethod] +public void HandlesNumericSeriesData() +{ + var data = new SeriesData(new[] { 10.5, 20.3, 15.8 }); + string json = JsonSerializer.Serialize(data, EChartBase.GetJsonSerializerOptions()); + Assert.AreEqual("[10.5,20.3,15.8]", json.Replace(" ", "")); +} + +[TestMethod] +public void HandlesObjectArrayData() +{ + var data = new List + { + new[] { 10, 20 }, // Scatter point [x, y] + new[] { 30, 40 }, + new Dictionary { { "value", 50 } } // Custom data object + }; + + string json = JsonSerializer.Serialize(data, EChartBase.GetJsonSerializerOptions()); + Assert.IsTrue(json.Contains("\"value\"")); +} + +[TestMethod] +public void HandlesMixedTypesList() +{ + var data = new List { 100, "text", true, null }; + string json = JsonSerializer.Serialize(data, EChartBase.GetJsonSerializerOptions()); + var doc = JsonDocument.Parse(json); + Assert.AreEqual(4, doc.RootElement.GetArrayLength()); +} +``` + +--- + +## CI/CD Integration + +### GitHub Actions Addition + +Update `.github/workflows/build.yml`: + +```yaml +- name: Run tests (Tier 1 & 2) + run: dotnet test src/Vizor.ECharts.Tests/Vizor.ECharts.Tests.csproj --logger=trx --results-directory=test-results --verbosity normal + +- name: Upload test results + if: always() + uses: actions/upload-artifact@v3 + with: + name: test-results + path: test-results +``` + +**Test Execution**: +```bash +# Local +dotnet test src/Vizor.ECharts.Tests/ + +# With detailed output +dotnet test src/Vizor.ECharts.Tests/ --verbosity detailed + +# TRX report for CI +dotnet test src/Vizor.ECharts.Tests/ --logger=trx +``` + +--- + +## Edge Cases & Special Considerations + +### 1. Null Handling +- `ChartOptions` with all null properties should serialize to `{}` +- Series with null data should not crash +- Optional properties should not appear in JSON if null (use `[JsonIgnore]` if needed) + +### 2. DefaultValue Attributes +- Properties marked with `[DefaultValue]` should be omitted from JSON if they match default +- Test that defaults are respected in serialization + +### 3. Enum Camelcase +- All enum values must serialize to camelCase (e.g., `AxisType.Category` → `"category"`) +- Test both enum and string property assignments + +### 4. JavaScript Functions +- Raw JavaScript in `JavascriptFunction` must not be double-escaped +- Multi-line functions with template literals must be preserved as-is +- Test that `eval()` would succeed on the output (without actually calling eval) + +### 5. External Data References +- Multiple `ExternalDataSourceRef` instances referencing the same fetch ID should produce identical JSON +- Circular reference in `ExternalDataSource` (e.g., data source referencing itself) should be detected or handled + +--- + +## Limitations & Future Enhancements + +### Current Constraints +- **No UI assertions**: Tier 1-2 only test serialization, not rendering +- **No third-party helpers**: All snapshot logic is custom +- **Manual baseline updates**: No `--update-snapshots` flag like other frameworks (can add via environment variable) + +### Future Tiers (Out of Scope for This Doc) +- **Tier 3**: Mock JS Interop (verify C# → JS contract) +- **Tier 4**: E2E with Browser (Playwright, actual rendering in Demo app) + +--- + +## Success Criteria + +✅ **Tier 1 Complete** when: +- All converters have unit tests with 90%+ coverage +- Serialization tests pass for all major chart types +- Edge cases (null, defaults, functions) covered + +✅ **Tier 2 Complete** when: +- Snapshot baselines established for 6+ chart types +- JSON output inspected and validated as correct ECharts format +- Snapshots committed to repo as golden source + +✅ **Ready for ECharts 6** when: +- All Tier 1 + 2 tests pass on current ECharts 5.6.0 +- Snapshots can be regenerated to 6.x output +- Breaking changes identified via snapshot diffs + +--- + +## References + +- [MSTest Documentation](https://learn.microsoft.com/en-us/dotnet/core/testing/unit-testing-with-mstest) +- [JsonDocument API](https://learn.microsoft.com/en-us/dotnet/api/system.text.json.jsondocument) +- [Custom JSON Converters in System.Text.Json](https://learn.microsoft.com/en-us/dotnet/api/system.text.json.serialization.jsonconverter) +- ECharts 5.6.0 Schema: https://echarts.apache.org/en/option.html diff --git a/doc/VizorECharts_JS_Interop.md b/doc/VizorECharts_JS_Interop.md new file mode 100644 index 00000000..242805cc --- /dev/null +++ b/doc/VizorECharts_JS_Interop.md @@ -0,0 +1,509 @@ +# vizor-echarts.js: JavaScript Interop Layer + +## Overview + +`vizor-echarts.js` is the core JavaScript bridge between Blazor/C# and Apache ECharts. It handles chart lifecycle, data fetching, event routing, and map registration. This file is served as part of the wwwroot bundle and loaded via `vizor-echarts-bundle-min.js` or `vizor-echarts-min.js` in the HTML host page. + +**Location**: [src/Vizor.ECharts/Scripts/vizor-echarts.js](../src/Vizor.ECharts/Scripts/vizor-echarts.js) +**Built by**: Gulp tasks in [src/Vizor.ECharts/gulpfile.js](../src/Vizor.ECharts/gulpfile.js) +**Output**: `wwwroot/js/vizor-echarts.js` and `wwwroot/js/vizor-echarts-bundle.js` + +--- + +## Data Flow + +### Initialization (first render) + +``` +C# [EChart.razor] + ├─ Options serialized to JSON (camelCase) + ├─ JSRuntime.InvokeVoidAsync("vizorECharts.initChart", id, theme, initOptions, chartOpts, mapOpts, fetchOpts) + │ +JS [vizor-echarts.js] + ├─ Fetch external data (if fetchOpts provided) + ├─ Register maps (if mapOpts provided) + ├─ Parse chartOpts JSON with eval() + ├─ echarts.init() and chart.setOption() + └─ Return control to Blazor +``` + +### Update (options changed) + +``` +C# [EChart.razor] + ├─ chart.UpdateAsync() called + ├─ Options modified, serialized to JSON + ├─ JSRuntime.InvokeVoidAsync("vizorECharts.updateChart", id, chartOpts, mapOpts, fetchOpts) + │ +JS [vizor-echarts.js] + ├─ Fetch external data (if needed) + ├─ Register maps (if needed) + ├─ Parse chartOpts JSON with eval() + ├─ chart.setOption() (merges with existing) + └─ Return control to Blazor +``` + +### Event (click on chart) + +``` +JS [vizor-echarts.js - attachClickEvent] + ├─ chart.on('click', callback) + ├─ Sanitize event data (remove circular refs) + ├─ objRef.invokeMethodAsync('HandleChartClick', params) + │ +C# [EChartBase.cs] + └─ [JSInvokable] HandleChartClick(EventParams) processes event +``` + +--- + +## API Reference + +### Global Object: `window.vizorECharts` + +All functions are accessed via `window.vizorECharts.*` from C# interop calls. + +#### Storage + +```javascript +charts: Map // Map +dataSources: Map // Map +logging: boolean // Debug flag (toggled in DEBUG builds) +``` + +--- + +### Chart Lifecycle Functions + +#### `initChart(id, theme, initOptions, chartOptions, mapOptions, fetchOptions)` + +**Purpose**: Initialize a new echarts instance and render it with options. + +**Parameters**: +- `id` (string): Unique chart container element ID +- `theme` (string | null): ECharts theme name (e.g., "dark", "light", or null for default) +- `initOptions` (JSON string): echarts.init() configuration; parsed with `JSON.parse()` + - Example: `{"renderer":"svg","width":"auto","height":"400px"}` +- `chartOptions` (JSON string | null): Chart options; parsed with `eval()` to support raw JS functions + - If null, chart shows loading spinner only +- `mapOptions` (JSON string | null): GeoJSON/SVG map definitions +- `fetchOptions` (JSON string | null): External data source fetch commands + +**Behavior**: +1. Create echarts instance: `echarts.init(document.getElementById(id), theme, JSON.parse(initOptions))` +2. Add window resize listener to auto-resize chart +3. Store chart in `charts` map +4. Show loading animation +5. Fetch external data if `fetchOptions` provided +6. Register maps if `mapOptions` provided +7. Parse and set chart options: `chart.setOption(eval('(' + chartOptions + ')'))` +8. Hide loading animation +9. Return immediately (no await needed from C#) + +**Throws**: If element with ID not found or echarts library not loaded. + +--- + +#### `updateChart(id, chartOptions, mapOptions, fetchOptions)` + +**Purpose**: Update an existing chart's options and re-render. + +**Parameters**: +- `id` (string): Chart ID to update +- `chartOptions` (JSON string): Updated options +- `mapOptions` (JSON string | null): Map updates (optional) +- `fetchOptions` (JSON string | null): External data updates (optional) + +**Behavior**: +1. Retrieve chart from `charts` map +2. Fetch external data if needed +3. Register maps if needed +4. Parse and merge options: `chart.setOption(eval('(' + chartOptions + ')'))` +5. Hide loading animation +6. Return immediately + +**Note**: Unlike `initChart`, this uses `setOption()` which merges with existing options (partial updates supported). + +--- + +#### `clearChart(id)` + +**Purpose**: Clear chart content without disposing echarts instance. + +**Parameters**: +- `id` (string): Chart ID + +**Behavior**: +- `chart.clear()` removes all series/elements but keeps the instance alive +- Useful for resetting data while preserving chart state + +--- + +#### `disposeChart(id)` + +**Purpose**: Fully cleanup: dispose echarts instance, remove cached entries, free external data. + +**Parameters**: +- `id` (string): Chart ID + +**Behavior**: +1. Retrieve chart from `charts` map +2. Cleanup linked data sources: iterate `chart.__dataSources` array and delete from `dataSources` map +3. `echarts.dispose(chart)` (echarts cleanup) +4. Remove chart from `charts` map +5. Called on C# `DisposeAsync()` to prevent memory leaks + +--- + +### External Data Handling + +#### `fetchExternalData(chart, fetchOptions)` + +**Purpose**: Async fetch external data from URLs with optional path extraction and post-processing. + +**Parameters**: +- `chart` (echarts.ECharts): Chart instance (to attach data source tracking) +- `fetchOptions` (JSON string): Serialized array of fetch commands + +**Fetch Command Format** (one per `ExternalDataSource`): +```javascript +{ + "id": "unique-fetch-id", + "url": "https://example.com/data.json", + "fetchAs": "json", // "json" or "string" + "path": "nodes.data", // optional dot-notation path + "afterLoad": "function(...){...}", // optional JS function as string + "options": { ... } // optional fetch() options (headers, etc.) +} +``` + +**Behavior**: +1. Initialize `chart.__dataSources = []` array to track this chart's fetches +2. For each fetch command: + a. Fetch URL with provided options + b. Parse response as JSON or text based on `fetchAs` + c. If `path` provided, extract nested property via `evaluatePath()` + d. If `afterLoad` provided, `eval()` and invoke on data + e. Store result in `dataSources` map with fetch ID + f. Track fetch ID in `chart.__dataSources` +3. Logging (if enabled): log each fetch and result + +**Error Handling**: Catches and logs errors in path evaluation and afterLoad execution; data remains undefined if errors occur. + +--- + +#### `evaluatePath(data, pathExpression)` + +**Purpose**: Extract nested data using dot-notation path (simple alternative to JsonPath). + +**Parameters**: +- `data` (object): Root data object +- `pathExpression` (string): Dot-separated path (e.g., `"nodes.items[0]"`) + +**Behavior**: +1. Split path by `.` +2. Traverse object properties sequentially +3. Return final value or undefined if any segment missing + +**Example**: +```javascript +evaluatePath({ nodes: { data: [1,2,3] } }, "nodes.data") +// Returns: [1, 2, 3] +``` + +**Limitations**: Does not support array indexing or complex JsonPath syntax (e.g., `[0]` not parsed). + +--- + +### Map Registration + +#### `registerMaps(chart, mapOptions)` + +**Purpose**: Register GeoJSON or SVG maps for geo/map chart types. + +**Parameters**: +- `chart` (echarts.ECharts): Chart instance +- `mapOptions` (JSON string): Serialized array of map definitions + +**Map Definition Format**: +```javascript +{ + "type": "geoJSON", // or "svg" + "mapName": "usa", + "geoJSON": { ... }, // if type="geoJSON" + "svg": "...", // if type="svg" + "specialAreas": { ... } // optional +} +``` + +**Behavior**: +1. For each map definition, call appropriate echarts registration: + - `echarts.registerMap(mapName, { geoJSON, specialAreas })` + - `echarts.registerMap(mapName, { svg })` +2. Logging: log each registered map + +--- + +### Event Handling + +#### `attachClickEvent(id, objRef)` + +**Purpose**: Attach click listener and route events back to C# via JSInterop. + +**Parameters**: +- `id` (string): Chart ID +- `objRef` (DotNetObjectReference): C# component reference for callback + +**Behavior**: +1. Retrieve chart from `charts` map +2. Register click listener: `chart.on('click', callback)` +3. In callback: + a. Sanitize params object: + - Delete `params.encode` (function, cannot serialize) + - Delete `params.event` (DOM event, cannot serialize) + b. Invoke C# JSInvokable: `objRef.invokeMethodAsync('HandleChartClick', params)` + c. Logging: log click event data + +**Sanitization**: Critical for preventing circular reference errors during serialization to .NET. + +--- + +### Debug & Access Functions + +#### `changeLogging(bool)` + +**Purpose**: Toggle console logging of serialized data and fetches. + +**Parameters**: +- `bool` (boolean): Enable/disable logging + +**Behavior**: Sets `vizorECharts.logging` flag. When true, console logs are printed during: +- Chart initialization/updates +- External data fetches +- Map registration +- Click events + +**Usage**: Called automatically in DEBUG builds; can be toggled manually in browser console. + +--- + +#### `getChart(id)` + +**Purpose**: Retrieve echarts instance by ID for debugging. + +**Parameters**: +- `id` (string): Chart ID + +**Returns**: echarts.ECharts instance or undefined if not found + +**Usage**: `window.vizorECharts.getChart('my-chart')` in browser console + +--- + +#### `getDataSource(fetchId)` + +**Purpose**: Retrieve cached external data by fetch ID for debugging. + +**Parameters**: +- `fetchId` (string): Fetch command ID + +**Returns**: Fetched data object or undefined if not found + +**Usage**: Called internally by `ExternalDataSourceRefConverter` to inject data into options. Can also use in browser console to inspect cached data. + +--- + +## Code Quality & Modernization (Updated) + +### ES6 Standards + +As of the latest update, `vizor-echarts.js` is fully modernized to ES6+ standards: +- **Const/Let**: All variables use `const` by default, `let` only for reassignments +- **Strict Equality**: All comparisons use `===` and `!==` (no loose equality) +- **Arrow Functions**: Callbacks use arrow function syntax +- **Template Literals**: String interpolation with backticks instead of concatenation +- **Method Shorthand**: Object methods use ES6 shorthand (`methodName(params) { }` instead of `methodName: function(params) { }`) +- **Async/Await**: Promise handling explicit and readable + +**Browser Support**: Modern browsers only (2017+, Chrome 51+, Firefox 54+, Safari 10+). No IE11 support without transpilation. + +### Memory Leak Fix + +Resize listener cleanup was implemented to prevent memory leaks: +- Resize handlers stored on chart instances: `chart.__resizeHandler = resizeHandler` +- Properly removed in `disposeChart()` via `window.removeEventListener()` +- Prevents accumulation of zombie event listeners when charts are created/disposed repeatedly + +--- + +## Internal Data Structures + +### `chart.__resizeHandler` (Function reference) + +**Purpose**: Store reference to resize event listener for cleanup on disposal. + +**Lifecycle**: +- Set in `initChart()` when listener is registered +- Used in `disposeChart()` to remove the listener +- Prevents memory leak from accumulated event listeners + +### `chart.__dataSources` (Array of string) + +**Purpose**: Track which external data fetches are linked to a chart. + +**Lifecycle**: +- Initialized in `fetchExternalData()` when first called +- Each fetch ID added to this array +- On `disposeChart()`, all data sources in this array are deleted from `dataSources` map + +**Why**: Enables cleanup without orphaning cached data when chart is disposed. + +--- + +## Usage Example + +### From C# (EChart.razor) + +```csharp +// Serialize options to JSON +var chartOpts = JsonSerializer.Serialize(options, jsonOpts); +var fetchOpts = JsonSerializer.Serialize(new[] { new FetchCommand(externalDataSource) }); + +// Invoke JavaScript +await JSRuntime.InvokeVoidAsync("vizorECharts.initChart", + id: "my-chart", + theme: "light", + initOptions: JsonSerializer.Serialize(new { renderer = "svg", width = "auto", height = "400px" }), + chartOptions: chartOpts, + mapOptions: null, + fetchOptions: fetchOpts +); +``` + +### From JavaScript (Console) + +```javascript +// Check if chart exists +window.vizorECharts.getChart('my-chart') + +// Enable logging +window.vizorECharts.changeLogging(true) + +// Retrieve cached external data +window.vizorECharts.getDataSource('my-fetch-id') + +// Manually dispose +window.vizorECharts.disposeChart('my-chart') +``` + +--- + +## Build & Bundling + +### Gulp Tasks + +| Task | Output | Includes | +|------|--------|----------| +| `gulp buildJs` | `wwwroot/js/vizor-echarts.js` (minified) | vizor-echarts.js only | +| `gulp buildJsBundle` | `wwwroot/js/vizor-echarts-bundle.js` (minified) | echarts + echarts-stat + vizor-echarts.js | +| `gulp` (default) | Both tasks | Both outputs | + +### How it's loaded + +In HTML host page (`_Host.cshtml` or `_Layout.cshtml`): +```html + + + + + + +``` + +--- + +## Debugging Tips + +### Enable console logging in production + +Open browser console and run: +```javascript +window.vizorECharts.changeLogging(true) +``` + +Then perform chart operations to see serialized JSON and fetch commands logged. + +### Inspect active charts + +```javascript +// List all active chart IDs +Array.from(window.vizorECharts.charts.keys()) + +// Get specific chart +const chart = window.vizorECharts.getChart('my-chart') +chart.getOption() // See current rendered options +``` + +### Inspect cached external data + +```javascript +// List all cached data fetch IDs +Array.from(window.vizorECharts.dataSources.keys()) + +// Retrieve specific fetch +window.vizorECharts.getDataSource('my-fetch-id') +``` + +--- + +## Performance Considerations + +### Chart Disposal + +Always call `chart.DisposeAsync()` in C# to invoke `disposeChart()`, which: +- Removes echarts instance from DOM +- Clears cached data +- Prevents memory leaks with long-running applications + +### eval() Usage + +The code uses `eval()` to parse chart options and execute `afterLoad` functions. This is intentional: +- Allows raw JavaScript function properties in options (e.g., custom formatters) +- Only executes trusted, server-generated JSON +- Alternative (safer but less flexible): pre-compile functions on C# side + +### Data Source Caching + +Fetched data is cached in `dataSources` map for performance (avoids re-fetching if multiple chart updates reference same data). Cached data is **not automatically cleared**—relies on `disposeChart()` cleanup. + +--- + +## Future Improvements + +See [IMPROVEMENTS.md](../IMPROVEMENTS.md): + +### ✅ DONE: JavaScript Code Quality Modernization +- Full ES6+ modernization of `vizor-echarts.js` completed +- Memory leak in resize listeners fixed +- Strict equality and const/let throughout + +### Next Priority: ES6 Module Migration +- **Goal**: Replace global `window.vizorECharts` with named exports and dynamic imports +- **Why**: Reduces namespace pollution, enables better tree-shaking, aligns with .NET 10 best practices +- **Details**: See [Modernize JS interop to ES6 modules](../IMPROVEMENTS.md#modernize-js-interop-to-es6-modules) + +### Other Improvements +- CI/CD automation for build/pack validation +- Component/integration testing for interop flows +- Generated-code boundaries documentation +- Common pitfalls guide in README + +--- + +## Related Files + +- **C# Interop**: [src/Vizor.ECharts/EChartBase.cs](../src/Vizor.ECharts/EChartBase.cs) +- **Razor Component**: [src/Vizor.ECharts/EChart.razor](../src/Vizor.ECharts/EChart.razor) +- **External Data Types**: [src/Vizor.ECharts/Types/ExternalDataSource.cs](../src/Vizor.ECharts/Types/ExternalDataSource.cs), [ExternalDataSourceRef.cs](../src/Vizor.ECharts/Types/ExternalDataSourceRef.cs) +- **Serialization**: [src/Vizor.ECharts/Internal/FetchCommand.cs](../src/Vizor.ECharts/Internal/FetchCommand.cs) +- **Build**: [src/Vizor.ECharts/gulpfile.js](../src/Vizor.ECharts/gulpfile.js) diff --git a/global.json b/global.json new file mode 100644 index 00000000..48af5972 --- /dev/null +++ b/global.json @@ -0,0 +1,9 @@ +{ + "sdk": { + "version": "10.0.100", + "rollForward": "latestFeature" + }, + "test": { + "runner": "Microsoft.Testing.Platform" + } +} \ No newline at end of file diff --git a/nuget.config b/nuget.config new file mode 100644 index 00000000..248a5bb5 --- /dev/null +++ b/nuget.config @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/Vizor.ECharts.BindingGenerator/AssemblyInfo.cs b/src/Vizor.ECharts.BindingGenerator/AssemblyInfo.cs new file mode 100644 index 00000000..cbcf7b37 --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/AssemblyInfo.cs @@ -0,0 +1,3 @@ +using System.Runtime.CompilerServices; + +[assembly: InternalsVisibleTo("Vizor.ECharts.Tests")] diff --git a/src/Vizor.ECharts.BindingGenerator/Diagnostics/DiagnosticCollector.cs b/src/Vizor.ECharts.BindingGenerator/Diagnostics/DiagnosticCollector.cs new file mode 100644 index 00000000..a1985de6 --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Diagnostics/DiagnosticCollector.cs @@ -0,0 +1,256 @@ +using System.Text; + +namespace Vizor.ECharts.BindingGenerator.Diagnostics; + +/// +/// Collects and aggregates type mapping diagnostics from the generator. +/// Provides analysis and reporting on type mapping support coverage. +/// +internal class DiagnosticCollector +{ + private readonly List diagnostics = new(); + + /// + /// Record a successfully mapped type (supported) + /// + public void RecordSupported(string propertyPath, List types, string mappedType) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = new List(types), + Level = DiagnosticLevel.Supported, + Message = $"Mapped to strong type", + GeneratedType = mappedType + }); + } + + /// + /// Record a partially supported type (falls back to object with typed accessors) + /// + public void RecordPartiallySupported( + string propertyPath, + List types, + string fallback, + string suggestion) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = new List(types), + Level = DiagnosticLevel.PartiallySupported, + Message = $"Falls back to {fallback} with typed accessors", + GeneratedType = fallback, + Suggestion = suggestion, + Context = new Dictionary { { "pattern", "typed_accessor" } } + }); + } + + /// + /// Record an unsupported type (falls back to object or downgraded type) + /// + public void RecordUnsupported( + string propertyPath, + List types, + string fallback = "object", + string? suggestion = null) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = new List(types), + Level = DiagnosticLevel.Unsupported, + Message = $"Falls back to {fallback}", + GeneratedType = fallback, + Suggestion = suggestion ?? "Investigate if a custom type is needed" + }); + } + + /// + /// Record a pattern that requires investigation + /// + public void RecordRequiresInvestigation( + string propertyPath, + List types, + string reason) + { + diagnostics.Add(new TypeMappingDiagnostic + { + PropertyPath = propertyPath, + Types = new List(types), + Level = DiagnosticLevel.RequiresInvestigation, + Message = reason, + GeneratedType = "object" + }); + } + + /// + /// Generate a diagnostic report from collected data + /// + public DiagnosticReport GenerateReport() + { + return new DiagnosticReport(diagnostics.AsReadOnly()); + } + + /// + /// Get all diagnostics collected so far + /// + public IReadOnlyList AllDiagnostics => diagnostics.AsReadOnly(); + + /// + /// Get summary counts + /// + public (int Supported, int Partial, int Unsupported, int Investigation, int Total) GetSummary() + { + return ( + diagnostics.Count(d => d.Level == DiagnosticLevel.Supported), + diagnostics.Count(d => d.Level == DiagnosticLevel.PartiallySupported), + diagnostics.Count(d => d.Level == DiagnosticLevel.Unsupported), + diagnostics.Count(d => d.Level == DiagnosticLevel.RequiresInvestigation), + diagnostics.Count + ); + } + + /// + /// Clear all collected diagnostics + /// + public void Clear() => diagnostics.Clear(); +} + +/// +/// Report generated from collected diagnostics +/// +internal class DiagnosticReport +{ + private readonly IReadOnlyList diagnostics; + + public DiagnosticReport(IReadOnlyList diagnostics) + { + this.diagnostics = diagnostics; + } + + /// Statistics + public int SupportedCount => diagnostics.Count(d => d.Level == DiagnosticLevel.Supported); + public int PartiallyCount => diagnostics.Count(d => d.Level == DiagnosticLevel.PartiallySupported); + public int UnsupportedCount => diagnostics.Count(d => d.Level == DiagnosticLevel.Unsupported); + public int InvestigateCount => diagnostics.Count(d => d.Level == DiagnosticLevel.RequiresInvestigation); + public int TotalCount => diagnostics.Count; + + /// + /// Get unsupported patterns grouped and sorted by frequency + /// + public IEnumerable> UnsupportedPatterns() + { + return diagnostics + .Where(d => d.Level == DiagnosticLevel.Unsupported) + .GroupBy(d => string.Join(",", d.Types.OrderBy(t => t))) + .OrderByDescending(g => g.Count()); + } + + /// + /// Get all patterns grouped by type and sorted by frequency + /// + public IEnumerable> AllPatterns() + { + return diagnostics + .GroupBy(d => string.Join(",", d.Types.OrderBy(t => t))) + .OrderByDescending(g => g.Count()); + } + + /// + /// Generate a markdown report + /// + public string ToMarkdown() + { + var sb = new StringBuilder(); + + sb.AppendLine("# Type Pattern Analysis Report"); + sb.AppendLine($"Generated: {DateTime.Now:yyyy-MM-dd HH:mm:ss}"); + sb.AppendLine(); + + // Summary section + sb.AppendLine("## Summary"); + sb.AppendLine($"- Total properties analyzed: {TotalCount}"); + sb.AppendLine($"- ✅ Fully supported: {SupportedCount} ({Percent(SupportedCount)}%)"); + sb.AppendLine($"- ⚠️ Partially supported: {PartiallyCount} ({Percent(PartiallyCount)}%)"); + sb.AppendLine($"- ❌ Unsupported: {UnsupportedCount} ({Percent(UnsupportedCount)}%)"); + sb.AppendLine($"- 🔍 Requires investigation: {InvestigateCount} ({Percent(InvestigateCount)}%)"); + sb.AppendLine(); + + // Unsupported patterns section + var unsupported = UnsupportedPatterns().ToList(); + if (unsupported.Any()) + { + sb.AppendLine("## Unsupported Patterns (Sorted by Frequency)"); + sb.AppendLine(); + + foreach (var group in unsupported) + { + var typeStr = group.Key; + var count = group.Count(); + var examples = group.Take(3).ToList(); + + sb.AppendLine($"### {typeStr} ({count} occurrences)"); + sb.AppendLine($"**Examples**: {string.Join(", ", examples.Select(e => e.PropertyPath))}"); + + var suggestion = examples.FirstOrDefault()?.Suggestion; + if (suggestion != null) + sb.AppendLine($"**Suggestion**: {suggestion}"); + + sb.AppendLine(); + } + } + + // Partially supported patterns + var partial = diagnostics + .Where(d => d.Level == DiagnosticLevel.PartiallySupported) + .GroupBy(d => string.Join(",", d.Types.OrderBy(t => t))) + .ToList(); + + if (partial.Any()) + { + sb.AppendLine("## Partially Supported Patterns (Typed Accessor Pattern)"); + sb.AppendLine(); + + foreach (var group in partial) + { + var typeStr = group.Key; + var count = group.Count(); + var examples = group.Take(3).ToList(); + + sb.AppendLine($"### {typeStr} ({count} occurrences)"); + sb.AppendLine($"**Pattern**: object? with typed accessors"); + sb.AppendLine($"**Examples**: {string.Join(", ", examples.Select(e => e.PropertyPath))}"); + sb.AppendLine(); + } + } + + // Investigation needed + var investigation = diagnostics + .Where(d => d.Level == DiagnosticLevel.RequiresInvestigation) + .GroupBy(d => string.Join(",", d.Types.OrderBy(t => t))) + .ToList(); + + if (investigation.Any()) + { + sb.AppendLine("## Patterns Requiring Investigation"); + sb.AppendLine(); + + foreach (var group in investigation) + { + var typeStr = group.Key; + var count = group.Count(); + var examples = group.Take(3).ToList(); + + sb.AppendLine($"### {typeStr} ({count} occurrences)"); + sb.AppendLine($"**Examples**: {string.Join(", ", examples.Select(e => e.PropertyPath))}"); + sb.AppendLine($"**Note**: {examples.First().Message}"); + sb.AppendLine(); + } + } + + return sb.ToString(); + } + + private double Percent(int count) => TotalCount > 0 ? Math.Round(100.0 * count / TotalCount, 1) : 0; +} diff --git a/src/Vizor.ECharts.BindingGenerator/Diagnostics/TypeMappingDiagnostic.cs b/src/Vizor.ECharts.BindingGenerator/Diagnostics/TypeMappingDiagnostic.cs new file mode 100644 index 00000000..b84f51ed --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Diagnostics/TypeMappingDiagnostic.cs @@ -0,0 +1,68 @@ +namespace Vizor.ECharts.BindingGenerator.Diagnostics; + +/// +/// Severity level for type mapping diagnostic. +/// +internal enum DiagnosticLevel +{ + /// Fully supported with strong type (e.g., NumberOrString, Color) + Supported, + + /// Falls back to object? with typed accessors (e.g., EnumOrFunction pattern) + PartiallySupported, + + /// Falls back to object or downgraded type (e.g., unmapped enum → string) + Unsupported, + + /// New pattern not yet analyzed - requires investigation + RequiresInvestigation +} + +/// +/// Diagnostic record for a single property type mapping decision. +/// +internal class TypeMappingDiagnostic +{ + /// + /// Full property path (e.g., "CrossStyle.type" or "FunnelSeries.sort") + /// + public string PropertyPath { get; set; } = string.Empty; + + /// + /// List of type options from option.json (e.g., ["enum", "number", "array"]) + /// + public List Types { get; set; } = new(); + + /// + /// Support level of this mapping + /// + public DiagnosticLevel Level { get; set; } + + /// + /// Descriptive message about the mapping + /// + public string Message { get; set; } = string.Empty; + + /// + /// Actionable suggestion for improvement (e.g., "Create EnumOrNumberArray") + /// + public string? Suggestion { get; set; } + + /// + /// Additional context information + /// Key examples: "enum_values", "mapped_type", "reason", "fallback_type" + /// + public Dictionary Context { get; set; } = new(); + + /// + /// The mapped C# type that was generated + /// + public string? GeneratedType { get; set; } + + public override string ToString() + { + var typeStr = string.Join(",", Types); + var level = Level.ToString(); + return $"[{level}] {PropertyPath}: {typeStr} → {GeneratedType ?? "object"} ({Message})"; + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingOptions.cs b/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingOptions.cs index 35dc003e..7c7e5e01 100644 --- a/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingOptions.cs +++ b/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingOptions.cs @@ -1,14 +1,14 @@ -using CommandLine.Text; -using CommandLine; - -namespace Vizor.ECharts.BindingGenerator; - -[Verb("option-binding", HelpText = "Generate C# code based on Apache ECharts documentation")] -internal class GenerateOptionBindingOptions -{ - [Option(longName: "input", Required = true, HelpText = "Specify the input option.json file")] - public string InputFile { get; set; } = default!; - - [Option(longName: "output", Required = true, HelpText = "Specify the directory where to generate the code")] - public string OutputDirectory { get; set; } = default!; -} +using CommandLine.Text; +using CommandLine; + +namespace Vizor.ECharts.BindingGenerator; + +[Verb("option-binding", HelpText = "Generate C# code based on Apache ECharts documentation")] +internal class GenerateOptionBindingOptions +{ + [Option(longName: "input", Required = true, HelpText = "Specify the input option.json file")] + public string InputFile { get; set; } = default!; + + [Option(longName: "output", Required = true, HelpText = "Specify the directory where to generate the code")] + public string OutputDirectory { get; set; } = default!; +} diff --git a/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingTool.cs b/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingTool.cs index 98caaf7a..b2cfd114 100644 --- a/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingTool.cs +++ b/src/Vizor.ECharts.BindingGenerator/GenerateOptionBindingTool.cs @@ -1,61 +1,149 @@ -using System.Text.Json; -using System.Text.Json.Nodes; -using Vizor.ECharts.BindingGenerator.Types; -using Vizor.ECharts.BindingGenerator.Generators; -using Vizor.ECharts.BindingGenerator.Phases; -using System.Data; - -namespace Vizor.ECharts.BindingGenerator; - -internal class GenerateOptionBindingTool -{ - public int Run(GenerateOptionBindingOptions options) - { - // check if the input file exists - if (!File.Exists(options.InputFile)) - { - Console.WriteLine($"ERROR: file '{options.InputFile}' doesn't exist"); - return 1; - } - - // check if the output dir exists - if (!Directory.Exists(options.OutputDirectory)) - { - Console.WriteLine($"ERROR: directory '{options.OutputDirectory}' doesn't exist"); - return 1; - } - - // parse the input JSON - var jsonOptions = new JsonDocumentOptions - { - CommentHandling = JsonCommentHandling.Skip, - }; - using JsonDocument document = JsonDocument.Parse(File.ReadAllText(options.InputFile), jsonOptions); - var optionElem = document.RootElement.GetProperty("option"); - - // process the input JSON - var typeCollection = new TypeCollection(); - var phases = new List { - new GenerateObjectTypesPhase(typeCollection) - }; - - foreach (var phase in phases) - { - phase.Run(optionElem); - } - - //var parser = new Parser(); - //var chartOptions = parser.ParseRoot(optionElem); - - // write regular option type classes - foreach (var objType in typeCollection.ListObjectTypesToGenerate()) - { - var generator = new ObjectTypeClassGenerator(options.OutputDirectory, objType); - generator.Generate(); - } - - Console.WriteLine("done."); - - return 0; - } -} +using System.Text.Json; + +using Vizor.ECharts.BindingGenerator.Diagnostics; +using Vizor.ECharts.BindingGenerator.Generators; +using Vizor.ECharts.BindingGenerator.Phases; +using Vizor.ECharts.BindingGenerator.Types; + +namespace Vizor.ECharts.BindingGenerator; + +internal class GenerateOptionBindingTool +{ + public int Run(GenerateOptionBindingOptions options) + { + // check if the input file exists + if (!File.Exists(options.InputFile)) + { + Console.WriteLine($"ERROR: file '{options.InputFile}' doesn't exist"); + return 1; + } + + // check if the output dir exists + if (!Directory.Exists(options.OutputDirectory)) + { + Console.WriteLine($"ERROR: directory '{options.OutputDirectory}' doesn't exist"); + return 1; + } + + // Extract ECharts version from input path (e.g., "5.6.0" from "echart-options/5.6.0/option.json") + string? echartsVersion = null; + var pathParts = options.InputFile.Replace("\\", "/").Split('/'); + for (int i = 0; i < pathParts.Length - 1; i++) + { + if (pathParts[i] == "echart-options" && i + 1 < pathParts.Length) + { + var candidate = pathParts[i + 1]; + // Only accept if it's not a filename (has no extension) or looks like a version folder + if (!candidate.Contains('.') || candidate.Split('.').Length >= 3) + { + echartsVersion = candidate; + break; + } + } + } + + // parse the input JSON + var jsonOptions = new JsonDocumentOptions + { + CommentHandling = JsonCommentHandling.Skip, + }; + using JsonDocument document = JsonDocument.Parse(File.ReadAllText(options.InputFile), jsonOptions); + var optionElem = document.RootElement.GetProperty("option"); + + // process the input JSON + var typeCollection = new TypeCollection(); + var diagnosticCollector = new DiagnosticCollector(); + var phases = new List { + new GenerateObjectTypesPhase(typeCollection, diagnosticCollector) + }; + + foreach (var phase in phases) + { + phase.Run(optionElem); + } + + //var parser = new Parser(); + //var chartOptions = parser.ParseRoot(optionElem); + + // write regular option type classes + foreach (var objType in typeCollection.ListObjectTypesToGenerate()) + { + // Skip shared hand-coded types + if (objType.IsShared) + continue; + + var generator = new ObjectTypeClassGenerator(options.OutputDirectory, objType, echartsVersion); + generator.Generate(); + } + + // Generate ISeries interface with all JsonDerivedType attributes + var seriesTypes = typeCollection.ListObjectTypesToGenerate() + .Where(t => t.TypeGroup == "Series" && !t.IsShared && + t.Name.EndsWith("Series") && + !t.Name.EndsWith("SeriesData") && + !t.Name.EndsWith("SeriesLevel") && + !t.Name.EndsWith("SeriesLink") && + !t.Name.EndsWith("SeriesCategory")) + .ToList(); + + if (seriesTypes.Count > 0) + { + var iSeriesGenerator = new PolymorphicInterfaceGenerator( + options.OutputDirectory, + "ISeries", + "Series", + seriesTypes, + "Series", + echartsVersion); + iSeriesGenerator.Generate(); + } + + // Generate IDataZoom interface with all JsonDerivedType attributes + var dataZoomTypes = typeCollection.ListObjectTypesToGenerate() + .Where(t => !t.IsShared && t.Name.EndsWith("DataZoom")) + .ToList(); + + if (dataZoomTypes.Count > 0) + { + var iDataZoomGenerator = new PolymorphicInterfaceGenerator( + options.OutputDirectory, + "IDataZoom", + "Options/DataZoom", + dataZoomTypes, + "DataZoom", + echartsVersion); + iDataZoomGenerator.Generate(); + } + + // Generate IVisualMap interface with all JsonDerivedType attributes + var visualMapTypes = typeCollection.ListObjectTypesToGenerate() + .Where(t => !t.IsShared && t.Name.EndsWith("VisualMap")) + .ToList(); + + if (visualMapTypes.Count > 0) + { + var iVisualMapGenerator = new PolymorphicInterfaceGenerator( + options.OutputDirectory, + "IVisualMap", + "Options/VisualMap", + visualMapTypes, + "VisualMap", + echartsVersion); + iVisualMapGenerator.Generate(); + } + + // Generate diagnostic report in same folder as working directory (where typeinfo.txt is written) + var report = diagnosticCollector.GenerateReport(); + var outputDirectory = Directory.GetCurrentDirectory(); + var reportPath = Path.Combine(outputDirectory, "TypePatternAnalysisReport.md"); + File.WriteAllText(reportPath, report.ToMarkdown()); + + var (supported, partial, unsupported, investigation, total) = diagnosticCollector.GetSummary(); + Console.WriteLine($"Pattern Report: {supported}/{total} supported ({partial} partial, {unsupported} unsupported, {investigation} investigation)"); + Console.WriteLine($"Report written to: {reportPath}"); + + Console.WriteLine("done."); + + return 0; + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoOptions.cs b/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoOptions.cs index f484a826..d8b0f6fa 100644 --- a/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoOptions.cs +++ b/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoOptions.cs @@ -1,11 +1,10 @@ -using CommandLine.Text; -using CommandLine; - -namespace Vizor.ECharts.BindingGenerator; - -[Verb("typeinfo", HelpText = "Analyze type information")] -internal class GenerateTypeInfoOptions -{ - [Option(longName: "input", Required = true, HelpText = "Specify the input option.json file")] - public string InputFile { get; set; } = default!; -} +using CommandLine; + +namespace Vizor.ECharts.BindingGenerator; + +[Verb("typeinfo", HelpText = "Analyze type information")] +internal class GenerateTypeInfoOptions +{ + [Option(longName: "input", Required = true, HelpText = "Specify the input option.json file")] + public string InputFile { get; set; } = default!; +} diff --git a/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoTool.cs b/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoTool.cs index 9212e02e..9c08d2a7 100644 --- a/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoTool.cs +++ b/src/Vizor.ECharts.BindingGenerator/GenerateTypeInfoTool.cs @@ -1,123 +1,135 @@ -using System.Text.Json; -using System.Text.Json.Nodes; -using Vizor.ECharts.BindingGenerator.Types; -using Vizor.ECharts.BindingGenerator.Generators; -using Vizor.ECharts.BindingGenerator.Phases; -using System.Data; - -namespace Vizor.ECharts.BindingGenerator; - -internal class GenerateTypeInfoTool -{ - public int Run(GenerateTypeInfoOptions options) - { - // check if the input file exists - if (!File.Exists(options.InputFile)) - { - Console.WriteLine($"ERROR: file '{options.InputFile}' doesn't exist"); - return 1; - } - - // parse the input JSON - var jsonOptions = new JsonDocumentOptions - { - CommentHandling = JsonCommentHandling.Skip, - }; - using JsonDocument document = JsonDocument.Parse(File.ReadAllText(options.InputFile), jsonOptions); - var optionElem = document.RootElement.GetProperty("option"); - - // process the input JSON - var typeCollection = new TypeCollection(); - var phases = new List { - new GenerateObjectTypesPhase(typeCollection) - }; - - foreach (var phase in phases) - { - phase.Run(optionElem); - } - - // print information about duplicates - using var fs = new FileStream("typeinfo.txt", FileMode.Create, FileAccess.Write); - using var writer = new StreamWriter(fs); - foreach (var pair in typeCollection.TypesWithDuplicates) - { - var diffs = new Dictionary>(); - var similarity = CountSimilarTypes(pair.Value, diffs); - - writer.WriteLine(); - writer.WriteLine($"#{pair.Key}: {pair.Value.Count} (similarity: {similarity})"); - foreach (var diffPair in diffs) - { - writer.WriteLine($"#\t{diffPair.Key}"); - - foreach (var path in diffPair.Value) - { - writer.WriteLine($"\t{path}"); - } - writer.WriteLine(); - } - } - - Console.WriteLine("done."); - - return 0; - } - - private string CountSimilarTypes(List list, Dictionary> diffs) - { - var remainingIndices = new List(list.Count); - for (int i = 0; i < list.Count; ++i) - remainingIndices.Add(i); - - var similarCount = new List(); - - while (remainingIndices.Count > 0) - { - var similarPaths = new List(); - - var current = list[remainingIndices[0]]; - var count = CountSimilarTo(list, remainingIndices, current, similarPaths); - - similarCount.Add(count); - diffs.Add(GetPropertyList(current), similarPaths); - } - - return string.Join(',', similarCount); - } - - private int CountSimilarTo(List list, List remainingIndices, ObjectType current, List similarPaths) - { - int count = 0; - - for (int i = remainingIndices.Count - 1; i >= 0; --i) - { - var index = remainingIndices[i]; - var item = list[index]; - - if (CompareType(current, item)) - { - remainingIndices.RemoveAt(i); - count += 1; - similarPaths.Add(item.Path); - } - } - - return count; - } - - private bool CompareType(ObjectType lookupType, ObjectType objType) - { - var propNamesA = GetPropertyList(lookupType); - var propNamesB = GetPropertyList(objType); - - return propNamesA == propNamesB; - } - - private string GetPropertyList(ObjectType objectType) - { - var names = objectType.Properties.Select(p => p.Name).ToList(); - names.Sort(); - return string.Join(",", names); - } -} +using System.Text.Json; +using System.Data; + +using Vizor.ECharts.BindingGenerator.Diagnostics; +using Vizor.ECharts.BindingGenerator.Types; +using Vizor.ECharts.BindingGenerator.Phases; + +namespace Vizor.ECharts.BindingGenerator; + +internal class GenerateTypeInfoTool +{ + public int Run(GenerateTypeInfoOptions options) + { + // check if the input file exists + if (!File.Exists(options.InputFile)) + { + Console.WriteLine($"ERROR: file '{options.InputFile}' doesn't exist"); + return 1; + } + + // parse the input JSON + var jsonOptions = new JsonDocumentOptions + { + CommentHandling = JsonCommentHandling.Skip, + }; + using JsonDocument document = JsonDocument.Parse(File.ReadAllText(options.InputFile), jsonOptions); + var optionElem = document.RootElement.GetProperty("option"); + + // process the input JSON + var typeCollection = new TypeCollection(); + var diagnosticCollector = new DiagnosticCollector(); + var phases = new List { + new GenerateObjectTypesPhase(typeCollection, diagnosticCollector) + }; + + foreach (var phase in phases) + { + phase.Run(optionElem); + } + + // print information about duplicates + var outputDirectory = Directory.GetCurrentDirectory(); + var typeinfoPath = Path.Combine(outputDirectory, "typeinfo.txt"); + + using var fs = new FileStream(typeinfoPath, FileMode.Create, FileAccess.Write); + using var writer = new StreamWriter(fs); + foreach (var pair in typeCollection.TypesWithDuplicates) + { + var diffs = new Dictionary>(); + var similarity = CountSimilarTypes(pair.Value, diffs); + + writer.WriteLine(); + writer.WriteLine($"#{pair.Key}: {pair.Value.Count} (similarity: {similarity})"); + foreach (var diffPair in diffs) + { + writer.WriteLine($"#\t{diffPair.Key}"); + + foreach (var path in diffPair.Value) + { + writer.WriteLine($"\t{path}"); + } + writer.WriteLine(); + } + } + + // Generate diagnostic report in same folder as typeinfo.txt + var report = diagnosticCollector.GenerateReport(); + var reportPath = Path.Combine(outputDirectory, "TypePatternAnalysisReport.md"); + File.WriteAllText(reportPath, report.ToMarkdown()); + + var (supported, partial, unsupported, investigation, total) = diagnosticCollector.GetSummary(); + Console.WriteLine($"Pattern Report: {supported}/{total} supported ({partial} partial, {unsupported} unsupported, {investigation} investigation)"); + + Console.WriteLine("done."); + + return 0; + } + + private string CountSimilarTypes(List list, Dictionary> diffs) + { + var remainingIndices = new List(list.Count); + for (int i = 0; i < list.Count; ++i) + remainingIndices.Add(i); + + var similarCount = new List(); + + while (remainingIndices.Count > 0) + { + var similarPaths = new List(); + + var current = list[remainingIndices[0]]; + var count = CountSimilarTo(list, remainingIndices, current, similarPaths); + + similarCount.Add(count); + diffs.Add(GetPropertyList(current), similarPaths); + } + + return string.Join(',', similarCount); + } + + private int CountSimilarTo(List list, List remainingIndices, ObjectType current, List similarPaths) + { + int count = 0; + + for (int i = remainingIndices.Count - 1; i >= 0; --i) + { + var index = remainingIndices[i]; + var item = list[index]; + + if (CompareType(current, item)) + { + remainingIndices.RemoveAt(i); + count += 1; + similarPaths.Add(item.Path); + } + } + + return count; + } + + private bool CompareType(ObjectType lookupType, ObjectType objType) + { + var propNamesA = GetPropertyList(lookupType); + var propNamesB = GetPropertyList(objType); + + return propNamesA == propNamesB; + } + + private string GetPropertyList(ObjectType objectType) + { + var names = objectType.Properties.Select(p => p.Name).ToList(); + names.Sort(); + return string.Join(",", names); + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Generators/CSharpCodeWriter.cs b/src/Vizor.ECharts.BindingGenerator/Generators/CSharpCodeWriter.cs index 8af74155..5cddcb24 100644 --- a/src/Vizor.ECharts.BindingGenerator/Generators/CSharpCodeWriter.cs +++ b/src/Vizor.ECharts.BindingGenerator/Generators/CSharpCodeWriter.cs @@ -1,251 +1,272 @@ -using System.Net; -using System.Text; -using HtmlAgilityPack; -using Microsoft.Extensions.Primitives; - -namespace Vizor.ECharts.BindingGenerator.Generators; - -internal sealed class CSharpCodeWriter : IDisposable -{ - private readonly StreamWriter writer; - - private int indentLevel = 0; - private bool currentLineIsIndented = false; - - private readonly int indentCharCount = 1; - private readonly char indentChar = '\t'; - - internal CSharpCodeWriter(string filename) - { - // check if the output directory exists - var dir = Path.GetDirectoryName(filename); - if (!string.IsNullOrEmpty(dir) && !Directory.Exists(dir)) - Directory.CreateDirectory(dir); - - writer = new StreamWriter(filename); - Filename = filename; - } - - public string Filename { get; } - - public void WriteNotice() - { - writer.WriteLine("// AUTO GENERATED - DO NOT EDIT - All changes will be lost"); - writer.WriteLine("// http://www.datahint.eu/"); - writer.WriteLine(); - } - - public void WriteNamespace(string ns) - { - writer.WriteLine($"namespace {ns};"); - } - - public void WriteUsing(string ns) - { - writer.WriteLine($"using {ns};"); - } - - public void WriteGlobalUsing(string ns) - { - writer.WriteLine($"global using {ns};"); - } - - public void EmptyLine() - { - writer.WriteLine(); - currentLineIsIndented = false; - } - - public void WriteLine(string line) - { - if (indentLevel > 0 && !currentLineIsIndented) - { - writer.Write(new string(indentChar, indentLevel * indentCharCount)); - } - - writer.WriteLine(line); - currentLineIsIndented = false; - } - - public void Write(string str) - { - if (indentLevel > 0 && !currentLineIsIndented) - { - writer.Write(new string(indentChar, indentLevel * indentCharCount)); - currentLineIsIndented = true; - } - - writer.Write(str); - } - - public void IndentMore() - { - ++indentLevel; - } - - public void IndentLess() - { - --indentLevel; - if (indentLevel < 0) - throw new InvalidOperationException("Indent mismatch"); - } - - public void Dispose() - { - writer.Dispose(); - GC.SuppressFinalize(this); - } - - public void OpenBrace() - { - WriteLine("{"); - IndentMore(); - } - - public void CloseBrace() - { - IndentLess(); - WriteLine("}"); - } - - public void WriteClassDeclaration(string className, params string[] baseNames) - { - if (baseNames == null || baseNames.Length == 0) - { - writer.WriteLine($"public partial class {className}"); - } - else - { - var inheritFrom = string.Join(", ", baseNames); - writer.WriteLine($"public partial class {className} : {inheritFrom}"); - } - } - - public void WriteInterfaceDeclaration(string className, params string[] baseNames) - { - if (baseNames == null || baseNames.Length == 0) - { - writer.WriteLine($"public partial interface {className}"); - } - else - { - var inheritFrom = string.Join(", ", baseNames); - writer.WriteLine($"public partial interface {className} : {inheritFrom}"); - } - } - - public void WriteIfBlock(string expr, params string[] statements) - { - WriteLine($"if ({expr}) {{"); - IndentMore(); - - foreach (var stm in statements) - WriteLine(stm); - - CloseBrace(); - } - - public void WriteConstString(string propertyName, string value) - { - var escaped = value.Replace("\"", "\\\""); - WriteLine($"public const string {propertyName} = \"{escaped}\";"); - } - - public void WriteDefaultValueAttribute(object? defaultValue) - { - if (defaultValue == null) - return; - - if (defaultValue is string str) - { - WriteLine($"[DefaultValue(\"{str}\")]"); - } - else if (defaultValue is bool b) - { - WriteLine($"[DefaultValue({b.ToString().ToLower()})]"); - } - else if (defaultValue is double d) - { - if ((d - (int)d) != 0) - { - // doubles with fractional part --> always write . - WriteLine($"[DefaultValue({d.ToString(System.Globalization.CultureInfo.InvariantCulture)})]"); - } - else - { - // integers - WriteLine($"[DefaultValue({d})]"); - } - } - else - { - WriteLine($"[DefaultValue({defaultValue})]"); - } - } - - public void WriteDocumentation(string? summary) - { - if (summary == null) - return; - - var humanReadable = GetHumanReadableText(summary); - if (humanReadable == null) - return; - - WriteLine("/// "); - - foreach (var line in humanReadable) - WriteLine($"/// {line}"); - - WriteLine("/// "); - } - - private static string[] GetHumanReadableText(string summary) - { - var doc = new HtmlDocument(); - doc.LoadHtml(summary); - - var sb = new StringBuilder(); - GetHumanReadableText(sb, doc.DocumentNode); - - // trim newlines at the end - // break long lines on each . (only when followed by a space) - return sb.ToString().Trim().Replace(". ", ".\n").Split('\n'); - } - - private static void GetHumanReadableText(StringBuilder sb, HtmlNode node) - { - if (node is HtmlTextNode textNode) - { - sb.Append(WebUtility.HtmlDecode(textNode.InnerText.Trim())); - sb.Append(' '); - return; - } - - if (node is HtmlCommentNode) - { - return; - } - - if (node.Name == "p") - { - sb.Append('\n'); - } - else if (node.Name == "code") - { - sb.Append(WebUtility.HtmlDecode(node.InnerText.Trim())); - sb.Append(' '); - return; - } - else if (node.Name == "br") - { - sb.Append('\n'); - return; - } - - foreach (var child in node.ChildNodes) - { - GetHumanReadableText(sb, child); - } - } -} +using System.Net; +using System.Text; + +using HtmlAgilityPack; + +namespace Vizor.ECharts.BindingGenerator.Generators; + +internal sealed class CSharpCodeWriter : IDisposable +{ + private readonly StreamWriter writer; + + private int indentLevel = 0; + private bool currentLineIsIndented = false; + + private readonly int indentCharCount = 4; + private readonly char indentChar = ' '; + + internal CSharpCodeWriter(string filename) + { + // check if the output directory exists + var dir = Path.GetDirectoryName(filename); + if (!string.IsNullOrEmpty(dir) && !Directory.Exists(dir)) + Directory.CreateDirectory(dir); + + writer = new StreamWriter(filename); + Filename = filename; + } + + public string Filename { get; } + + public void WriteNotice(string? echartsVersion = null) + { + writer.WriteLine("// AUTO GENERATED - DO NOT EDIT - All changes will be lost"); + if (!string.IsNullOrEmpty(echartsVersion)) + writer.WriteLine($"// ECharts Version: {echartsVersion}"); + writer.WriteLine("// http://www.datahint.eu/"); + writer.WriteLine(); + } + + public void WriteNamespace(string ns) + { + writer.WriteLine($"namespace {ns};"); + } + + public void WriteUsing(string ns) + { + writer.WriteLine($"using {ns};"); + } + + public void WriteGlobalUsing(string ns) + { + writer.WriteLine($"global using {ns};"); + } + + public void EmptyLine() + { + writer.WriteLine(); + currentLineIsIndented = false; + } + + public void WriteLine(string line) + { + if (indentLevel > 0 && !currentLineIsIndented) + { + writer.Write(new string(indentChar, indentLevel * indentCharCount)); + } + + writer.WriteLine(line); + currentLineIsIndented = false; + } + + public void Write(string str) + { + if (indentLevel > 0 && !currentLineIsIndented) + { + writer.Write(new string(indentChar, indentLevel * indentCharCount)); + currentLineIsIndented = true; + } + + writer.Write(str); + } + + public void IndentMore() + { + ++indentLevel; + } + + public void IndentLess() + { + --indentLevel; + if (indentLevel < 0) + throw new InvalidOperationException("Indent mismatch"); + } + + public void Dispose() + { + writer.Dispose(); + GC.SuppressFinalize(this); + } + + public void OpenBrace() + { + WriteLine("{"); + IndentMore(); + } + + public void CloseBrace() + { + IndentLess(); + WriteLine("}"); + } + + public void WriteClassDeclaration(string className, params string[] baseNames) + { + if (baseNames == null || baseNames.Length == 0) + { + writer.WriteLine($"public partial class {className}"); + } + else + { + var inheritFrom = string.Join(", ", baseNames); + writer.WriteLine($"public partial class {className} : {inheritFrom}"); + } + } + + public void WriteInterfaceDeclaration(string className, params string[] baseNames) + { + if (baseNames == null || baseNames.Length == 0) + { + writer.WriteLine($"public partial interface {className}"); + } + else + { + var inheritFrom = string.Join(", ", baseNames); + writer.WriteLine($"public partial interface {className} : {inheritFrom}"); + } + } + + public void WriteIfBlock(string expr, params string[] statements) + { + WriteLine($"if ({expr}) {{"); + IndentMore(); + + foreach (var stm in statements) + WriteLine(stm); + + CloseBrace(); + } + + public void WriteConstString(string propertyName, string value) + { + var escaped = value.Replace("\"", "\\\""); + WriteLine($"public const string {propertyName} = \"{escaped}\";"); + } + + public void WriteDefaultValueAttribute(object? defaultValue) + { + if (defaultValue == null) + return; + + if (defaultValue is string str) + { + WriteLine($"[DefaultValue(\"{str}\")]"); + } + else if (defaultValue is bool b) + { + WriteLine($"[DefaultValue({b.ToString().ToLower()})]"); + } + else if (defaultValue is double d) + { + if ((d - (int)d) != 0) + { + // doubles with fractional part --> always write . + WriteLine($"[DefaultValue({d.ToString(System.Globalization.CultureInfo.InvariantCulture)})]"); + } + else + { + // integers + WriteLine($"[DefaultValue({d})]"); + } + } + else + { + WriteLine($"[DefaultValue({defaultValue})]"); + } + } + + public void WriteDocumentation(string? summary) + { + if (summary == null) + return; + + var humanReadable = GetHumanReadableText(summary); + if (humanReadable == null) + return; + + // Check if any line contains XML special characters + bool needsCData = humanReadable.Any(line => + line.Contains('<') || line.Contains('>') || + line.Contains('&') || line.Contains('"') || line.Contains('\'')); + + WriteLine("/// "); + + if (needsCData) + { + WriteLine("/// "); + } + else + { + foreach (var line in humanReadable) + { + WriteLine($"/// {line}"); + } + } + + WriteLine("/// "); + } + + private static string[] GetHumanReadableText(string summary) + { + var doc = new HtmlDocument(); + doc.LoadHtml(summary); + + var sb = new StringBuilder(); + GetHumanReadableText(sb, doc.DocumentNode); + + // trim newlines at the end + // break long lines on each . (only when followed by a space) + return sb.ToString().Trim().Replace(". ", ".\n").Split('\n'); + } + + private static void GetHumanReadableText(StringBuilder sb, HtmlNode node) + { + if (node is HtmlTextNode textNode) + { + sb.Append(WebUtility.HtmlDecode(textNode.InnerText.Trim())); + sb.Append(' '); + return; + } + + if (node is HtmlCommentNode) + { + return; + } + + if (node.Name == "p") + { + sb.Append('\n'); + } + else if (node.Name == "code") + { + sb.Append(WebUtility.HtmlDecode(node.InnerText.Trim())); + sb.Append(' '); + return; + } + else if (node.Name == "br") + { + sb.Append('\n'); + return; + } + + foreach (var child in node.ChildNodes) + { + GetHumanReadableText(sb, child); + } + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Generators/ObjectTypeClassGenerator.cs b/src/Vizor.ECharts.BindingGenerator/Generators/ObjectTypeClassGenerator.cs index b426ae94..e88a3296 100644 --- a/src/Vizor.ECharts.BindingGenerator/Generators/ObjectTypeClassGenerator.cs +++ b/src/Vizor.ECharts.BindingGenerator/Generators/ObjectTypeClassGenerator.cs @@ -1,121 +1,243 @@ -using Vizor.ECharts.BindingGenerator.Types; - -namespace Vizor.ECharts.BindingGenerator.Generators; - -internal class ObjectTypeClassGenerator -{ - private readonly ObjectType objectType; - - private readonly string optionsFile; - - public ObjectTypeClassGenerator(string outputDir, ObjectType objectType) - { - this.objectType = objectType; - - string dir = outputDir; - if (objectType.TypeGroup.Contains("Series")) - { - var idx = objectType.Name.IndexOf("Series"); - if (idx > 0) - { - var seriesName = objectType.Name[0..idx]; - dir = Path.Combine(outputDir, "Series", seriesName); - } - } - else if (objectType.TypeGroup != "Options") - { - dir = Path.Combine(outputDir, "Options", objectType.TypeGroup); - } - else - { - dir = Path.Combine(outputDir, "Options"); - } - - if (dir != outputDir && !Directory.Exists(dir)) - Directory.CreateDirectory(dir); - - optionsFile = Path.Combine(dir, objectType.DotNetType + ".cs"); - } - - public string OptionsFile => optionsFile; - - public void Generate() - { - using var writer = new CSharpCodeWriter(optionsFile); - writer.WriteNotice(); - writer.EmptyLine(); - - writer.WriteUsing("System.ComponentModel"); - writer.WriteUsing("System.Text.Json.Serialization"); - writer.EmptyLine(); - - writer.WriteNamespace("Vizor.ECharts"); - writer.EmptyLine(); - - writer.WriteClassDeclaration(objectType.DotNetType); - writer.OpenBrace(); - - foreach (var prop in objectType.Properties) - { - if (prop.MappedType == null) - { - writer.WriteLine($"//TODO: {prop.PropertyName}"); - } - else - { - // the 'type' property of anyOf objects is mandatory - string defaultAssign = string.Empty; - if (objectType.TypeGroup != "Options" && prop.Name == "type") - { - defaultAssign = GetDefaultAssign(prop.Default); - } - - writer.WriteDocumentation(prop.Description); - writer.WriteLine($"[JsonPropertyName(\"{prop.Name}\")]"); - writer.WriteDefaultValueAttribute(prop.Default); - - if (prop.MappedType.TypeWarning != null) - { - writer.WriteLine($"//TODO: Type Warning: {prop.MappedType.TypeWarning}"); - } - - writer.WriteLine($"public {prop.MappedType.DotNetType}? {prop.PropertyName} {{ get; set; }} {defaultAssign}"); - writer.EmptyLine(); - } - } - - writer.CloseBrace(); - } - - private string GetDefaultAssign(object? defaultValue) - { - if (defaultValue == null) - return string.Empty; - - if (defaultValue is string str) - { - return $" = \"{str}\";"; - } - else if (defaultValue is bool b) - { - return $" = {b.ToString().ToLower()};"; - } - else if (defaultValue is double d) - { - if ((d - (int)d) != 0) - { - // doubles with fractional part --> always write . - return $" = {d.ToString(System.Globalization.CultureInfo.InvariantCulture)};"; - } - else - { - // integers - return $" = {d};"; - } - } - else - { - return $" = {defaultValue};"; - } - } -} +using Vizor.ECharts.BindingGenerator.Types; + +namespace Vizor.ECharts.BindingGenerator.Generators; + +internal class ObjectTypeClassGenerator +{ + private readonly ObjectType objectType; + private readonly string optionsFile; + private readonly string? echartsVersion; + + public ObjectTypeClassGenerator(string outputDir, ObjectType objectType, string? echartsVersion = null) + { + this.objectType = objectType; + this.echartsVersion = echartsVersion; + + string dir = outputDir; + if (objectType.TypeGroup.Contains("Series")) + { + var idx = objectType.Name.IndexOf("Series"); + if (idx > 0) + { + var seriesName = objectType.Name[0..idx]; + dir = Path.Combine(outputDir, "Series", "Generated", seriesName); + } + else + { + dir = Path.Combine(outputDir, "Series", "Generated"); + } + } + else if (objectType.TypeGroup != "Options") + { + dir = Path.Combine(outputDir, "Options", "Generated", objectType.TypeGroup); + } + else + { + dir = Path.Combine(outputDir, "Options", "Generated"); + } + + if (dir != outputDir && !Directory.Exists(dir)) + Directory.CreateDirectory(dir); + + optionsFile = Path.Combine(dir, objectType.DotNetType + ".cs"); + } + + public string OptionsFile => optionsFile; + + public void Generate() + { + using var writer = new CSharpCodeWriter(optionsFile); + writer.WriteNotice(echartsVersion); + writer.EmptyLine(); + + writer.WriteUsing("System.ComponentModel"); + writer.WriteUsing("System.Text.Json.Serialization"); + writer.EmptyLine(); + + writer.WriteNamespace("Vizor.ECharts"); + writer.EmptyLine(); + + // Add ISeries interface only for actual series classes (not data classes) + var isSeries = objectType.TypeGroup.Contains("Series") && + objectType.DotNetType.EndsWith("Series") && + !objectType.DotNetType.EndsWith("SeriesData"); + + // Add IVisualMap interface for VisualMap types + var isVisualMap = objectType.TypeGroup == "VisualMap" && + objectType.DotNetType.EndsWith("VisualMap"); + + var baseTypes = isSeries ? new[] { "ISeries" } : + isVisualMap ? new[] { "IVisualMap" } : + Array.Empty(); + writer.WriteClassDeclaration(objectType.DotNetType, baseTypes); + writer.OpenBrace(); + + foreach (var prop in objectType.Properties) + { + if (prop.MappedType == null) + { + writer.WriteLine($"//TODO: {prop.PropertyName}"); + } + else if (prop.MappedType is SingleOrArrayType singleOrArray) + { + // Generate three properties for single-or-array pattern: + // 1. Internal object backing field with [JsonPropertyName] and [JsonInclude] + // 2. Single accessor with [JsonIgnore] + // 3. List accessor with [JsonIgnore] + + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonPropertyName(\"{prop.Name}\")]"); + writer.WriteLine($"[JsonInclude]"); + writer.WriteDefaultValueAttribute(prop.Default); + writer.WriteLine($"internal object? {prop.PropertyName}Object {{ get; set; }}"); + writer.EmptyLine(); + + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public {singleOrArray.InnerTypeName}? {prop.PropertyName}"); + writer.OpenBrace(); + writer.WriteLine($"\tget => {prop.PropertyName}Object as {singleOrArray.InnerTypeName};"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.CloseBrace(); + writer.EmptyLine(); + + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public List<{singleOrArray.InnerTypeName}>? {prop.PropertyName}List"); + writer.OpenBrace(); + writer.WriteLine($"\tget => {prop.PropertyName}Object as List<{singleOrArray.InnerTypeName}>;"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.CloseBrace(); + writer.EmptyLine(); + } + else if (prop.MappedType is EnumOrFunctionType enumOrFunc) + { + // Generate three properties for enum-or-function pattern: + // 1. Internal object backing field with [JsonPropertyName] and [JsonInclude] + // 2. Public enum accessor with [JsonIgnore] + // 3. Public function accessor with [JsonIgnore] + + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonPropertyName(\"{prop.Name}\")]"); + writer.WriteDefaultValueAttribute(prop.Default); + writer.WriteLine($"[JsonInclude]"); + writer.WriteLine($"internal object? {prop.PropertyName}Object {{ get; set; }}"); + writer.EmptyLine(); + + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public {enumOrFunc.EnumTypeName}? {prop.PropertyName}"); + writer.OpenBrace(); + writer.WriteLine($"\tget => ({enumOrFunc.EnumTypeName}?){prop.PropertyName}Object;"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.CloseBrace(); + writer.EmptyLine(); + + writer.WriteDocumentation($"A {prop.Name} function."); + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public JavascriptFunction? {prop.PropertyName}Function"); + writer.OpenBrace(); + writer.WriteLine($"\tget => {prop.PropertyName}Object as JavascriptFunction;"); + writer.WriteLine($"\tset => {prop.PropertyName}Object = value;"); + writer.CloseBrace(); + writer.EmptyLine(); + } + else + { + // Skip 'type' property for polymorphic types (Series, DataZoom, VisualMap) - handled by polymorphic serialization + bool isPolymorphicTypeProperty = + (objectType.TypeGroup == "Series" || objectType.Name.EndsWith("DataZoom") || objectType.TypeGroup == "VisualMap") && + prop.Name == "type"; + + if (isPolymorphicTypeProperty) + { + continue; // Skip generating the type property + } + + // the 'type' property of anyOf objects is mandatory and non-nullable + string defaultAssign = string.Empty; + bool isTypeProperty = objectType.TypeGroup != "Options" && prop.Name == "type"; + if (isTypeProperty) + { + defaultAssign = GetDefaultAssign(prop.Default); + } + + writer.WriteDocumentation(prop.Description); + writer.WriteLine($"[JsonPropertyName(\"{prop.Name}\")]"); + writer.WriteDefaultValueAttribute(prop.Default); + + if (prop.MappedType.TypeWarning != null) + { + writer.WriteLine($"//TODO: Type Warning: {prop.MappedType.TypeWarning}"); + } + + // Type property is non-nullable and init-only (required by ISeries/IDataZoom interfaces) + string nullableMarker = isTypeProperty ? "" : "?"; + string accessors = isTypeProperty ? "get; init;" : "get; set;"; + writer.WriteLine($"public {prop.MappedType.DotNetType}{nullableMarker} {prop.PropertyName} {{ {accessors} }} {defaultAssign}"); + writer.EmptyLine(); + + // Special case: GraphSeries.Links and Categories should have type-safe accessors + if (objectType.Name == "GraphSeries" && (prop.Name == "links" || prop.Name == "categories")) + { + string accessorType = prop.Name == "links" ? "GraphSeriesLink" : "GraphSeriesCategory"; + string accessorName = prop.Name == "links" ? "LinksList" : "CategoriesList"; + + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public List<{accessorType}>? {accessorName}"); + writer.OpenBrace(); + writer.WriteLine($"\tget => {prop.PropertyName} as List<{accessorType}>;"); + writer.WriteLine($"\tset => {prop.PropertyName} = value;"); + writer.CloseBrace(); + writer.EmptyLine(); + } + + // Special case: SankeySeries.Links should have type-safe accessor + if (objectType.Name == "SankeySeries" && prop.Name == "links") + { + writer.WriteLine($"[JsonIgnore]"); + writer.WriteLine($"public List? LinksList"); + writer.OpenBrace(); + writer.WriteLine($"\tget => {prop.PropertyName} as List;"); + writer.WriteLine($"\tset => {prop.PropertyName} = value;"); + writer.CloseBrace(); + writer.EmptyLine(); + } + } + } + + writer.CloseBrace(); + } + + private string GetDefaultAssign(object? defaultValue) + { + if (defaultValue == null) + return string.Empty; + + if (defaultValue is string str) + { + return $" = \"{str}\";"; + } + else if (defaultValue is bool b) + { + return $" = {b.ToString().ToLower()};"; + } + else if (defaultValue is double d) + { + if ((d - (int)d) != 0) + { + // doubles with fractional part --> always write . + return $" = {d.ToString(System.Globalization.CultureInfo.InvariantCulture)};"; + } + else + { + // integers + return $" = {d};"; + } + } + else + { + return $" = {defaultValue};"; + } + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Generators/PolymorphicInterfaceGenerator.cs b/src/Vizor.ECharts.BindingGenerator/Generators/PolymorphicInterfaceGenerator.cs new file mode 100644 index 00000000..286347b8 --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Generators/PolymorphicInterfaceGenerator.cs @@ -0,0 +1,63 @@ +using Vizor.ECharts.BindingGenerator.Types; + +namespace Vizor.ECharts.BindingGenerator.Generators; + +/// +/// Generates polymorphic interfaces with JsonDerivedType attributes +/// +internal class PolymorphicInterfaceGenerator +{ + private readonly string outputDirectory; + private readonly string interfaceName; + private readonly string subFolder; + private readonly List types; + private readonly string typeSuffix; + private readonly string? echartsVersion; + + public PolymorphicInterfaceGenerator( + string outputDirectory, + string interfaceName, + string subFolder, + IEnumerable types, + string typeSuffix, + string? echartsVersion = null) + { + this.outputDirectory = outputDirectory; + this.interfaceName = interfaceName; + this.subFolder = subFolder; + this.types = types.OrderBy(t => t.Name).ToList(); + this.typeSuffix = typeSuffix; + this.echartsVersion = echartsVersion; + } + + public void Generate() + { + var outputFile = Path.Combine(outputDirectory, subFolder, "Generated", $"{interfaceName}.cs"); + + using var writer = new CSharpCodeWriter(outputFile); + + writer.WriteNotice(echartsVersion); + writer.WriteUsing("System.Text.Json.Serialization"); + writer.EmptyLine(); + writer.WriteNamespace("Vizor.ECharts"); + writer.EmptyLine(); + + writer.WriteLine("[JsonPolymorphic(TypeDiscriminatorPropertyName = \"type\")]"); + + foreach (var type in types) + { + // Get the type discriminator value from the default value of the type property + var typeProperty = type.Properties.FirstOrDefault(p => p.Name == "type"); + string discriminator = typeProperty?.Default?.ToString()?.Trim('"') ?? + type.Name.Replace(typeSuffix, "").ToLowerInvariant(); + + writer.WriteLine($"[JsonDerivedType(typeof({type.Name}), \"{discriminator}\")]"); + } + + writer.WriteLine($"public interface {interfaceName}"); + writer.WriteLine("{"); + writer.WriteLine("}"); + + Console.WriteLine($"Generated {interfaceName}.cs with {types.Count} types"); + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Helper.cs b/src/Vizor.ECharts.BindingGenerator/Helper.cs index 77a28709..99487cbd 100644 --- a/src/Vizor.ECharts.BindingGenerator/Helper.cs +++ b/src/Vizor.ECharts.BindingGenerator/Helper.cs @@ -1,52 +1,84 @@ -using System.Text; -using System.Text.Json; - -namespace Vizor.ECharts.BindingGenerator; - -internal static class Helper -{ - public static string ToClassName(this string input) - { - string[] words = input.Split(new char[] { '-', '_', ' ' }, StringSplitOptions.RemoveEmptyEntries); - var sb = new StringBuilder(); - - foreach (string word in words) - { - sb.Append(char.ToUpper(word[0])); - if (word.Length > 1) - sb.Append(word[1..]); - } - - return sb.ToString(); - } - - public static List ParsePropertyTypes(JsonElement value) - { - List types = new(); - - if (value.ValueKind == JsonValueKind.Array) - { - foreach (var child in value.EnumerateArray()) - { - if (child.ValueKind != JsonValueKind.String) - throw new ArgumentException($"JSON type array element must be of type string: '{value.ValueKind}'"); - - var str = child.GetString(); - if (!string.IsNullOrEmpty(str)) - types.Add(str.ToLower()); - } - } - else if (value.ValueKind == JsonValueKind.String) - { - var str = value.GetString(); - if (!string.IsNullOrEmpty(str)) - types.Add(str.ToLower()); - } - else - { - throw new ArgumentException($"JSON type element must be of type string or array: '{value.ValueKind}'"); - } - - return types; - } -} +using System.Text; +using System.Text.Json; + +namespace Vizor.ECharts.BindingGenerator; + +internal static class Helper +{ + public static string ToClassName(this string input) + { + string[] words = input.Split(new char[] { '-', '_', ' ' }, StringSplitOptions.RemoveEmptyEntries); + var sb = new StringBuilder(); + + foreach (string word in words) + { + sb.Append(char.ToUpper(word[0])); + if (word.Length > 1) + sb.Append(word[1..]); + } + + return sb.ToString(); + } + + /// + /// Singularize a plural property name for use as a type name in array items. + /// For example: "links" -> "link", "levels" -> "level", "items" -> "item" + /// Special cases: "series" stays "series" (singular and plural are the same) + /// + public static string Singularize(this string input) + { + if (string.IsNullOrEmpty(input)) + return input; + + // Special cases where singular and plural are the same + if (input.Equals("series", StringComparison.OrdinalIgnoreCase)) + return input; + + // Common plural forms + if (input.EndsWith("ies", StringComparison.OrdinalIgnoreCase)) + return input[..^3] + "y"; + if (input.EndsWith("ves", StringComparison.OrdinalIgnoreCase)) + return input[..^3] + "f"; + if (input.EndsWith("xes", StringComparison.OrdinalIgnoreCase) || + input.EndsWith("zes", StringComparison.OrdinalIgnoreCase) || + input.EndsWith("ches", StringComparison.OrdinalIgnoreCase) || + input.EndsWith("shes", StringComparison.OrdinalIgnoreCase)) + return input[..^2]; + if (input.EndsWith("es", StringComparison.OrdinalIgnoreCase)) + return input[..^2]; + if (input.EndsWith("s", StringComparison.OrdinalIgnoreCase) && !input.EndsWith("ss", StringComparison.OrdinalIgnoreCase)) + return input[..^1]; + + return input; + } + + public static List ParsePropertyTypes(JsonElement value) + { + List types = new(); + + if (value.ValueKind == JsonValueKind.Array) + { + foreach (var child in value.EnumerateArray()) + { + if (child.ValueKind != JsonValueKind.String) + throw new ArgumentException($"JSON type array element must be of type string: '{value.ValueKind}'"); + + var str = child.GetString(); + if (!string.IsNullOrEmpty(str)) + types.Add(str.ToLower()); + } + } + else if (value.ValueKind == JsonValueKind.String) + { + var str = value.GetString(); + if (!string.IsNullOrEmpty(str)) + types.Add(str.ToLower()); + } + else + { + throw new ArgumentException($"JSON type element must be of type string or array: '{value.ValueKind}'"); + } + + return types; + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs b/src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs index 0bed3ee6..c7461e8b 100644 --- a/src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs +++ b/src/Vizor.ECharts.BindingGenerator/Phases/BasePhase.cs @@ -1,359 +1,685 @@ -using System; -using System.Data; -using System.Diagnostics; -using System.Text.Json; -using Vizor.ECharts.BindingGenerator.Types; -using static System.Runtime.InteropServices.JavaScript.JSType; - -namespace Vizor.ECharts.BindingGenerator.Phases; - -internal abstract class BasePhase -{ - protected readonly TypeCollection typeCollection; - - public BasePhase(TypeCollection typeCollection) - { - this.typeCollection = typeCollection; - } - - internal abstract void Run(JsonElement root); - - protected virtual IPropertyType? ParseObjectType(OptionProperty parent, string propName, JsonElement value, string dataPrefix, string typeGroup) - { - //Console.WriteLine($"OBJECT {prop.Name}"); - - // special handling for 'anyOf' arrays - if (value.TryGetProperty("anyOf", out var anyOfElement)) - { - // generate child types - foreach (JsonElement anyOfItemElement in anyOfElement.EnumerateArray()) - { - var anyOfType = GetAnyOfType(anyOfItemElement, propName); - - // special case - if (anyOfType.Contains("xxx")) - continue; - - //Console.WriteLine($"---anyOf {propName} {anyOfType}"); - _ = ParseObjectType(parent, anyOfType, anyOfItemElement, dataPrefix: anyOfType, typeGroup: propName); - } - - return new SimpleType("object"); - } - - // special handling for "data" elements - if (propName == "data") - { - propName = dataPrefix + "Data"; - } - - // special case - if (propName == "") - { - propName = "RichStyleName"; - } - - // create a new type --> we parse the type completely, so we can do a (deep) duplicate check - var objType = new ObjectType(parent, propName, typeGroup); - - if (value.TryGetProperty("properties", out var childProps)) - { - foreach (JsonProperty childProp in childProps.EnumerateObject()) - { - objType.Properties.Add(ParseProperty(objType, childProp)); - } - } - - typeCollection.TrackType(objType); - - // there are a lot of types that are 90% similar - // we could generate a unique type for each, but in some cases that would result in 300 very silimar types - // so merging seems to be the best option - return typeCollection.MergeType(objType); - } - - protected virtual OptionProperty ParseProperty(ObjectType parentType, JsonProperty prop) - { - //Console.WriteLine($"PROPERTY {prop.Name}"); - - // special case - var propName = prop.Name; - if (propName == "") - { - propName = "RichStyleName"; - } - - var optProp = new OptionProperty(parentType, propName, Helper.ToClassName(propName)); - - if (prop.Value.TryGetProperty("description", out var descProp)) - { - optProp.Description = descProp.GetString(); - } - - if (prop.Value.TryGetProperty("type", out var typeProp)) - { - optProp.AddTypes(Helper.ParsePropertyTypes(typeProp)); - } - - if (prop.Value.TryGetProperty("default", out var defaultProp)) - { - optProp.Default = ParseDefault(defaultProp); - } - - // always parse uiControl after type+default, since we might override certain values - if (prop.Value.TryGetProperty("uiControl", out var uiControlProp)) - { - if (uiControlProp.TryGetProperty("type", out var subTypeProp)) - { - var subType = subTypeProp.GetString()?.ToLower(); - if (subType == "enum") - { - //"uiControl": { - // "default": "butt", - // "options": "butt,round,square", - // "type": "enum" - //} - - // replace the 'string' type with 'enum' - optProp.RemoveType("string"); - optProp.AddType("enum"); - - if (uiControlProp.TryGetProperty("options", out var subOptionsProp)) - { - optProp.EnumOptions = (subOptionsProp.GetString() ?? string.Empty).Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries); - } - } - else if (subType == "color") - { - //"uiControl": { - // "default": "#fff", - // "type": "color" - // } - - // replace 'string' 'object' type with 'color' - optProp.RemoveType("string"); - optProp.RemoveType("object"); - optProp.AddType("color"); - } - else if (!string.IsNullOrWhiteSpace(subType)) - { - if (subType != "text" && subType != "percent" && subType != "angle") - optProp.AddType(subType); - } - } - - if (uiControlProp.TryGetProperty("default", out var subDefaultProp)) - { - optProp.Default = subDefaultProp.GetString(); - } - } - - if (prop.Value.TryGetProperty("items", out var itemsProp)) - { - // items requires special handling - // we need to define an item type, e.g. MediaItem and pass this to the MapType function - // MapType can then generate List instead of List - - var itemName = parentType.Name + Helper.ToClassName(propName); - optProp.ItemType = ParseObjectType(optProp, itemName, itemsProp, dataPrefix: itemName, typeGroup: parentType.TypeGroup ?? "Options"); - } - - // at this point we can decide how to map the type - optProp.MappedType = MapType(parentType, optProp, prop); - - return optProp; - } - - protected virtual object? ParseDefault(JsonElement element) - { - return element.ValueKind switch - { - JsonValueKind.String => ParseDefaultAsString(element), - JsonValueKind.False => false, - JsonValueKind.True => true, - JsonValueKind.Number => element.GetDouble(), - _ => null - }; - } - - protected virtual string ParseDefaultAsString(JsonElement element) - { - var str = element.GetString()!.Trim('\'', '"'); // trim single quotes - - // special handling for arrays - if (str.StartsWith('[')) - { - str = str.Replace("\"", "").Replace("'", ""); - } - - return str; - } - - protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) - { - // sanity checks - if (optProp.Types == null || optProp.Types.Count == 0) - throw new ArgumentException($"JSON property '{prop.Name}' could not be mapped: no type info available"); - - // first try mapping enum types by name - if (typeCollection.TryGetMappedEnumType(prop.Name, parent.Name, out var mappedEnumType)) - return mappedEnumType; - - // matching based on types: simple first - if (optProp.Types.Count == 1) - { - switch (optProp.Types[0]) - { - case "object": - return ParseObjectType(optProp, prop.Name, prop.Value, dataPrefix: prop.Name, typeGroup: "Options"); - case "enum": - // don't care that fontFamily/cursor isn't mapped, warn about all other unmapped types - if (prop.Name != "fontFamily" && prop.Name != "cursor") - { - Console.WriteLine($"WARNING: enum type '{prop.Name}' in '{parent.Name}' with values '{string.Join(',', optProp.EnumOptions ?? Array.Empty())}' is not mapped"); - return new SimpleType("string") - { - TypeWarning = $"enum type '{prop.Name}' in '{parent.Name}' with values '{string.Join(',', optProp.EnumOptions ?? Array.Empty())}' is not mapped" - }; - } - return new SimpleType("string"); - case "string": - return new SimpleType("string"); - case "number": - // special case: we don't want to use double for indices - if (prop.Name.Contains("index", StringComparison.InvariantCultureIgnoreCase)) - return new SimpleType("int"); - else - return new SimpleType("double"); - case "boolean": - return new SimpleType("bool"); - case "color": - return new MappedCustomType(typeof(Color)); - case "function": - return new MappedCustomType(typeof(Function)); - case "array": - return typeCollection.MapArrayType(parent, optProp, prop); - case "*": - return new SimpleType("object"); - } - } - - // complex matching - if (optProp.Types.Count == 2) - { - switch (optProp.Types[0], optProp.Types[1]) - { - case ("boolean", "number"): - return new MappedCustomType(typeof(NumberOrBool)); - case ("number", "string"): - return new MappedCustomType(typeof(NumberOrString)); - case ("icon", "string"): - return new MappedEnumType(prop.Name, typeof(Icon)); - case ("array", "string"): - //TODO: 'symbol' --> not MappedEnumType ?? - return new MappedEnumType(prop.Name, typeof(Icon)); - case ("array", "number"): - return new MappedCustomType(typeof(NumberOrNumberArray)); - case ("function", "string"): - return new MappedCustomType(typeof(StringOrFunction)); - case ("function", "number"): - return new MappedCustomType(typeof(NumberOrFunction)); - case ("function", "object"): - return new MappedCustomType(typeof(ObjectOrFunction)); - case ("array", "percentvector"): - case ("array", "vector"): - return new SimpleType("double[]"); - case ("array", "color"): - return new MappedCustomType(typeof(ColorArray)); - case ("color", "function"): - return new MappedCustomType(typeof(ColorOrFunction)); - case ("color", "number"): // specific case for borderColorSaturation - return new SimpleType("double"); - } - } - - // even more complex matching - if (optProp.Types is ["function", "number", "string"]) - { - return new MappedCustomType(typeof(NumberOrStringOrFunction)); - } - else if (optProp.Types is ["function", "icon", "string"]) - { - return new MappedCustomType(typeof(StringOrFunction)); - } - else if (optProp.Types is ["date", "number", "string"]) - { - return new MappedCustomType(typeof(NumberOrString)); // has implicit datetime support - } - else if (optProp.Types is ["array", "function", "number"]) - { - return new MappedCustomType(typeof(NumberArrayOrFunction)); - } - else if (optProp.Types is ["array", "number", "vector"]) - { - return new MappedCustomType(typeof(NumberArray)); - } - - // give additional enum warning if any of the types is an enum - var typeList = string.Join(',', optProp.Types ?? Enumerable.Empty()); - if (optProp.Types?.Contains("enum") ?? false) - { - Console.WriteLine($"WARNING: {typeList} type '{prop.Name}' in '{parent.Name}' with values '{string.Join(',', optProp.EnumOptions ?? Array.Empty())}' is not mapped"); - } - - Console.WriteLine($"ERROR: Failed to map property '{prop.Name}' in type '{parent.Name}' with types '{typeList}'"); - //throw new ArgumentException($"Failed to map property '{prop.Name}' in type '{parent.Name}' with types '{string.Join(',', optProp.Types ?? Enumerable.Empty())}'"); - - return new SimpleType("object") - { - TypeWarning = $"Failed to map property '{prop.Name}' in type '{parent.Name}' with types '{typeList}'" - }; - } - - protected bool CompareType(ObjectType lookupType, ObjectType objType) - { - var propNamesA = GetPropertyList(lookupType); - var propNamesB = GetPropertyList(objType); - - if (propNamesA != propNamesB) - { - Console.WriteLine($"!!! Type compare error: {lookupType.Name}"); - Console.WriteLine($"\tA: {propNamesA}"); - Console.WriteLine($"\tB: {propNamesB}"); - - //TODO return false; - } - - return true; - } - - protected string GetPropertyList(ObjectType objectType) - { - var names = objectType.Properties.Select(p => p.Name).ToList(); - names.Sort(); - return string.Join(",", names); - } - - protected virtual string GetAnyOfType(JsonElement anyOfItemElement, string postfix) - { - if (!anyOfItemElement.TryGetProperty("properties", out var propertiesItem)) - throw new ArgumentException($"Could not determine properties element of {postfix} item"); - - if (!propertiesItem.TryGetProperty("type", out var typeElem)) - throw new ArgumentException($"Could not determine type of {postfix} item"); - - if (!typeElem.TryGetProperty("default", out var defaultElem)) - throw new ArgumentException($"Could not determine default type value of {postfix} item"); - - // for example: in transform parent --> this must resolve to TransformFilter - //"type": { - // "default": "'filter'", - // "description": "", - // "type": [ "string" ] - // } - - var cls = Helper.ToClassName(defaultElem.GetString()!.Trim('\'')); - - return cls + postfix; - } -} +using System.Data; +using System.Text.Json; +using Vizor.ECharts.BindingGenerator.Diagnostics; +using Vizor.ECharts.BindingGenerator.Types; + +namespace Vizor.ECharts.BindingGenerator.Phases; + +internal abstract class BasePhase +{ + protected readonly TypeCollection typeCollection; + protected readonly DiagnosticCollector diagnosticCollector; + protected readonly TypePatternRegistry patternRegistry; + + /// + /// Properties that can accept either a single object or an array of objects + /// in ECharts, even though option.json only marks them as type: ["Object"]. + /// These properties support multiple instances (e.g., multiple grids, multiple axes). + /// + protected static readonly HashSet MultiInstanceProperties = new(StringComparer.OrdinalIgnoreCase) + { + "grid", + "xAxis", + "yAxis", + "dataset", + "calendar", + "dataZoom", + "visualMap", + "parallel", + "singleAxis" + }; + + public BasePhase(TypeCollection typeCollection, DiagnosticCollector diagnosticCollector) + { + this.typeCollection = typeCollection; + this.diagnosticCollector = diagnosticCollector; + this.patternRegistry = new TypePatternRegistry(typeCollection); + } + + internal abstract void Run(JsonElement root); + + protected virtual IPropertyType? ParseObjectType(OptionProperty parent, string propName, JsonElement value, string dataPrefix, string typeGroup) + { + //Console.WriteLine($"OBJECT {prop.Name}"); + + // special handling for 'anyOf' arrays + if (value.TryGetProperty("anyOf", out var anyOfElement)) + { + // generate child types + foreach (JsonElement anyOfItemElement in anyOfElement.EnumerateArray()) + { + var anyOfType = GetAnyOfType(anyOfItemElement, propName); + + // special case + if (anyOfType.Contains("xxx")) + continue; + + //Console.WriteLine($"---anyOf {propName} {anyOfType}"); + _ = ParseObjectType(parent, anyOfType, anyOfItemElement, dataPrefix: anyOfType, typeGroup: propName); + } + + return new SimpleType("object"); + } + + // special handling for "data" elements + if (propName == "data") + { + propName = dataPrefix + "Data"; + } + + // special case + if (propName == "") + { + propName = "RichStyleName"; + } + + // special case: all *AxisData types are identical, use shared AxisData + if (propName.EndsWith("AxisData") && (propName == "xAxisData" || propName == "yAxisData" || + propName == "angleAxisData" || propName == "radiusAxisData" || + propName == "parallelAxisData" || propName == "singleAxisData")) + { + // Return the shared AxisData type instead of creating separate ones + return typeCollection.GetOrCreateSharedType("AxisData", "Options"); + } + + // special case: ParallelAxisDefaultData is identical to AxisData + if (propName == "parallelAxisDefaultData") + { + return typeCollection.GetOrCreateSharedType("AxisData", "Options"); + } + + // create a new type --> we parse the type completely, so we can do a (deep) duplicate check + var objType = new ObjectType(parent, propName, typeGroup); + + if (value.TryGetProperty("properties", out var childProps)) + { + foreach (JsonProperty childProp in childProps.EnumerateObject()) + { + objType.Properties.Add(ParseProperty(objType, childProp)); + } + } + + typeCollection.TrackType(objType); + + // there are a lot of types that are 90% similar + // we could generate a unique type for each, but in some cases that would result in 300 very silimar types + // so merging seems to be the best option + return typeCollection.MergeType(objType); + } + + protected virtual OptionProperty ParseProperty(ObjectType parentType, JsonProperty prop) + { + //Console.WriteLine($"PROPERTY {prop.Name}"); + + // special case + var propName = prop.Name; + if (propName == "") + { + propName = "RichStyleName"; + } + + var optProp = new OptionProperty(parentType, propName, Helper.ToClassName(propName)); + + if (prop.Value.TryGetProperty("description", out var descProp)) + { + optProp.Description = descProp.GetString(); + } + + if (prop.Value.TryGetProperty("type", out var typeProp)) + { + optProp.AddTypes(Helper.ParsePropertyTypes(typeProp)); + } + + if (prop.Value.TryGetProperty("default", out var defaultProp)) + { + optProp.Default = ParseDefault(defaultProp); + } + + // always parse uiControl after type+default, since we might override certain values + if (prop.Value.TryGetProperty("uiControl", out var uiControlProp)) + { + if (uiControlProp.TryGetProperty("type", out var subTypeProp)) + { + var subType = subTypeProp.GetString()?.ToLower(); + if (subType == "enum") + { + //"uiControl": { + // "default": "butt", + // "options": "butt,round,square", + // "type": "enum" + //} + + // replace the 'string' type with 'enum' + optProp.RemoveType("string"); + optProp.AddType("enum"); + + if (uiControlProp.TryGetProperty("options", out var subOptionsProp)) + { + optProp.EnumOptions = (subOptionsProp.GetString() ?? string.Empty).Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries); + } + } + else if (subType == "color") + { + //"uiControl": { + // "default": "#fff", + // "type": "color" + // } + + // replace 'string' 'object' type with 'color' + optProp.RemoveType("string"); + optProp.RemoveType("object"); + optProp.AddType("color"); + } + else if (!string.IsNullOrWhiteSpace(subType)) + { + if (subType != "text" && subType != "percent" && subType != "angle") + optProp.AddType(subType); + } + } + + if (uiControlProp.TryGetProperty("default", out var subDefaultProp)) + { + optProp.Default = subDefaultProp.GetString(); + } + } + + if (prop.Value.TryGetProperty("items", out var itemsProp)) + { + // items requires special handling + // we need to define an item type, e.g. MediaItem and pass this to the MapType function + // MapType can then generate List instead of List + + // Singularize the property name for array items: "links" -> "link", "levels" -> "level" + var singularPropName = propName.Singularize(); + var itemName = parentType.Name + Helper.ToClassName(singularPropName); + if (propName != singularPropName) + Console.WriteLine($"DEBUG: Singularized '{propName}' -> '{singularPropName}' for type '{itemName}'"); + optProp.ItemType = ParseObjectType(optProp, itemName, itemsProp, dataPrefix: itemName, typeGroup: parentType.TypeGroup ?? "Options"); + } + + // at this point we can decide how to map the type + optProp.MappedType = MapType(parentType, optProp, prop); + + return optProp; + } + + protected virtual object? ParseDefault(JsonElement element) + { + return element.ValueKind switch + { + JsonValueKind.String => ParseDefaultAsString(element), + JsonValueKind.False => false, + JsonValueKind.True => true, + JsonValueKind.Number => element.GetDouble(), + _ => null + }; + } + + protected virtual string ParseDefaultAsString(JsonElement element) + { + var str = element.GetString()!.Trim('\'', '"'); // trim single quotes + + // special handling for arrays + if (str.StartsWith('[')) + { + str = str.Replace("\"", "").Replace("'", ""); + } + + return str; + } + + protected virtual IPropertyType? MapType(ObjectType parent, OptionProperty optProp, JsonProperty prop) + { + // sanity checks + if (optProp.Types == null || optProp.Types.Count == 0) + throw new ArgumentException($"JSON property '{prop.Name}' could not be mapped: no type info available"); + + var propertyPath = $"{parent.Name}.{prop.Name}"; + var types = optProp.Types.OrderBy(t => t).ToList(); + + // Special case: property-specific custom type mappings + if (prop.Name == "position" && parent.Name == "tooltip" && string.Join(",", types) == "array,string") + { + var tooltipPosType = new MappedCustomType(typeof(TooltipPosition)); + diagnosticCollector.RecordSupported(propertyPath, types, tooltipPosType.DotNetType); + return tooltipPosType; + } + + // Special case: Detail.Width and Detail.Height should accept both numbers and percentage strings + if ((prop.Name == "width" || prop.Name == "height") && parent.DotNetType == "Detail") + { + var numberOrStringType = new MappedCustomType(typeof(NumberOrString)); + diagnosticCollector.RecordSupported(propertyPath, types, numberOrStringType.DotNetType); + return numberOrStringType; + } + + // Special case: cellSize in Calendar should allow percentage strings + if (prop.Name == "cellSize" && (parent.DotNetType == "Calendar")) + { + var cellSizeType = new MappedCustomType(typeof(CellSize)); + diagnosticCollector.RecordSupported(propertyPath, types, cellSizeType.DotNetType); + return cellSizeType; + } + + // Special case: symbolSize in PictorialBar should allow percentage strings + if (prop.Name == "symbolSize" && (parent.DotNetType == "PictorialBarSeries" || parent.DotNetType == "PictorialBarSeriesData")) + { + var numberOrStringArray = new MappedCustomType(typeof(NumberOrStringArray)); + diagnosticCollector.RecordSupported(propertyPath, types, numberOrStringArray.DotNetType); + return numberOrStringArray; + } + + // Special case: dimension property accepts both numeric dimension indices and string dimension names + // ECharts examples show usage like: dimension: 1, dimension: 2 (numeric) or dimension: 'sales', dimension: 'profit' (string) + if (prop.Name == "dimension" && string.Join(",", types) == "string") + { + var numberOrStringType = new MappedCustomType(typeof(NumberOrString)); + diagnosticCollector.RecordSupported(propertyPath, types, numberOrStringType.DotNetType); + return numberOrStringType; + } + + // Special case: Axis type property should use AxisType enum + if (prop.Name == "type" && (parent.Name == "xAxis" || parent.Name == "yAxis" || + parent.Name == "angleAxis" || parent.Name == "radiusAxis" || + parent.Name == "parallelAxis" || parent.Name == "singleAxis" || + parent.Name == "parallelAxisDefault")) + { + if (typeCollection.TryGetMappedEnumType("axisType", parent.Name, out var axisTypeEnum) && axisTypeEnum != null) + { + diagnosticCollector.RecordSupported(propertyPath, types, axisTypeEnum.DotNetType); + return axisTypeEnum; + } + } + + // first try mapping enum types by name + // BUT: if this is an enum+function pattern, skip this and let the complex matching handle it + bool isEnumAndFunction = types.Contains("enum") && types.Contains("function"); + if (!isEnumAndFunction && typeCollection.TryGetMappedEnumType(prop.Name, parent.Name, out var mappedEnumType) && mappedEnumType != null) + { + diagnosticCollector.RecordSupported(propertyPath, types, mappedEnumType.DotNetType); + return mappedEnumType; + } + // detect single-or-array pattern (Grid, XAxis, YAxis, etc.) + // These properties accept either a single object or an array of objects + if (IsArrayAndObject(optProp)) + { + IPropertyType? innerType = null; + + // For known multi-instance properties without ItemType, create it from the property itself + if (optProp.ItemType == null && + MultiInstanceProperties.Contains(prop.Name) && + (optProp.ParentType == null || + string.IsNullOrEmpty(optProp.ParentType.Name) || + optProp.ParentType.Name == "ChartOptions" || + optProp.ParentType.Name == "option")) + { + // The object type should already exist or will be created by ParseObjectType + // Use the property's own object definition as the inner type + innerType = ParseObjectType(optProp, prop.Name, prop.Value, dataPrefix: prop.Name, typeGroup: "Options"); + optProp.ItemType = innerType; + } + else + { + innerType = optProp.ItemType; + } + + if (innerType is IObjectType objType) + { + var singleOrArrayType = new SingleOrArrayType(objType.DotNetType); + diagnosticCollector.RecordSupported(propertyPath, types, $"SingleOrArrayType<{objType.DotNetType}>"); + return singleOrArrayType; + } + } + // matching based on types: simple first + if (optProp.Types.Count == 1) + { + IPropertyType? result = null; + + // Special case: parallelAxis is defined as Object in option.json but should be List + if (prop.Name == "parallelAxis" && parent.DotNetType == "ChartOptions") + { + // Create the ParallelAxis object type if needed + var parallelAxisType = ParseObjectType(optProp, prop.Name, prop.Value, dataPrefix: prop.Name, typeGroup: "Options"); + if (parallelAxisType is ObjectType objType) + { + result = new GenericListType(objType); + diagnosticCollector.RecordSupported(propertyPath, types, $"List<{objType.DotNetType}>"); + return result; + } + } + + // Special case: children property in TreemapSeriesData should be List + if (prop.Name == "children" && parent.DotNetType == "TreemapSeriesData") + { + // Return a list of the parent type (recursive structure) + result = new GenericListType(parent); + diagnosticCollector.RecordSupported(propertyPath, types, $"List<{parent.DotNetType}>"); + return result; + } + + // Special case: layoutCenter in Geo should be NumberOrStringArray + if (prop.Name == "layoutCenter" && parent.DotNetType == "Geo") + { + result = new MappedCustomType(typeof(NumberOrStringArray)); + diagnosticCollector.RecordSupported(propertyPath, types, "NumberOrStringArray"); + return result; + } + + // Special case: data property in TreeSeries should remain as object? for flexibility + if (prop.Name == "data" && parent.DotNetType == "TreeSeries") + { + result = new SimpleType("object"); + diagnosticCollector.RecordSupported(propertyPath, types, "object"); + return result; + } + + // Special case: transform property in Dataset should be SingleOrArrayType + if (prop.Name == "transform" && parent.DotNetType == "Dataset") + { + result = new SingleOrArrayType("IDatasetTransform"); + diagnosticCollector.RecordSupported(propertyPath, types, "SingleOrArrayType"); + return result; + } + + // Special case: value property in RadarSeriesData should accept array or single value + if (prop.Name == "value" && parent.DotNetType == "RadarSeriesData") + { + result = new SimpleType("object"); + diagnosticCollector.RecordSupported(propertyPath, types, "object"); + return result; + } + + // Special case: type property in MagicType should be string[]? for chart type names + if (prop.Name == "type" && parent.DotNetType == "MagicType") + { + result = new SimpleType("string[]"); + diagnosticCollector.RecordSupported(propertyPath, types, "string[]"); + return result; + } + + // Special case: rotate property in Label should be NumberOrString? for rotation values or "radial" + if (prop.Name == "rotate" && parent.DotNetType == "Label") + { + result = new MappedCustomType(typeof(NumberOrString)); + diagnosticCollector.RecordSupported(propertyPath, types, "NumberOrString"); + return result; + } + + // Special case: pieces property in PiecewiseVisualMap should be List? + if (prop.Name == "pieces" && parent.DotNetType == "PiecewiseVisualMap") + { + result = new GenericListType(new SimpleType("VisualMapPiece")); + diagnosticCollector.RecordSupported(propertyPath, types, "List"); + return result; + } + + // Special case: links and categories in GraphSeries should be object? for List or ExternalDataSourceRef + if ((prop.Name == "links" && parent.DotNetType == "GraphSeries") || + (prop.Name == "categories" && parent.DotNetType == "GraphSeries")) + { + result = new SimpleType("object"); + diagnosticCollector.RecordSupported(propertyPath, types, "object"); + return result; + } + + // Special case: links in SankeySeries should be object? for List, array, or ExternalDataSourceRef + if (prop.Name == "links" && parent.DotNetType == "SankeySeries") + { + result = new SimpleType("object"); + diagnosticCollector.RecordSupported(propertyPath, types, "object"); + return result; + } + + switch (optProp.Types[0]) + { + case "object": + result = ParseObjectType(optProp, prop.Name, prop.Value, dataPrefix: prop.Name, typeGroup: "Options"); + break; + case "string": + result = new SimpleType("string"); + break; + case "number": + // special case: we don't want to use double for indices + result = prop.Name.Contains("index", StringComparison.InvariantCultureIgnoreCase) + ? new SimpleType("int") + : new SimpleType("double"); + break; + case "boolean": + result = new SimpleType("bool"); + break; + case "color": + result = new MappedCustomType(typeof(Color)); + break; + case "function": + result = new MappedCustomType(typeof(JavascriptFunction)); + break; + case "array": + result = typeCollection.MapArrayType(parent, optProp, prop); + break; + case "*": + result = new SimpleType("object"); + break; + case "percentvector": + case "vector": + // percentvector: array of 2 elements (number or percent string) + // vector: array of 2 elements (numbers) + result = new SimpleType("double[]"); + break; + case "enum": + // don't care that fontFamily/cursor isn't mapped, warn about all other unmapped types + if (prop.Name != "fontFamily" && prop.Name != "cursor") + { + Console.WriteLine($"WARNING: enum type '{prop.Name}' in '{parent.Name}' with values '{string.Join(',', optProp.EnumOptions ?? Array.Empty())}' is not mapped"); + diagnosticCollector.RecordUnsupported( + propertyPath, + types, + "string", + patternRegistry.GenerateSuggestion(types, string.Join(',', optProp.EnumOptions ?? Array.Empty()))); + return new SimpleType("string") + { + TypeWarning = $"enum type '{prop.Name}' in '{parent.Name}' with values '{string.Join(',', optProp.EnumOptions ?? Array.Empty())}' is not mapped" + }; + } + result = new SimpleType("string"); + break; + } + + if (result != null) + { + var resultType = result switch + { + SimpleType st => st.DotNetType, + MappedCustomType mct => mct.DotNetType, + IObjectType ot => ot.DotNetType, + _ => "object" + }; + diagnosticCollector.RecordSupported(propertyPath, types, resultType); + return result; + } + } + + // complex matching - use pattern registry + if (optProp.Types.Count >= 2) + { + // Special case: enum+function pattern - generate EnumOrFunctionType with typed accessors + if (types.Contains("enum") && types.Contains("function")) + { + if (typeCollection.TryGetMappedEnumType(prop.Name, parent.DotNetType, out var enumType) && enumType != null) + { + var result = new EnumOrFunctionType(enumType.DotNetType); + diagnosticCollector.RecordPartiallySupported( + propertyPath, + types, + $"EnumOrFunctionType<{enumType.DotNetType}>", + "Uses typed accessor pattern"); + return result; + } + else + { + Console.WriteLine($"WARNING: Could not resolve enum type for '{prop.Name}' in '{parent.DotNetType}' with enum+function pattern"); + diagnosticCollector.RecordUnsupported( + propertyPath, + types, + "object", + "Could not resolve enum type - consider adding enum mapping"); + return new SimpleType("object") + { + TypeWarning = $"enum,function type '{prop.Name}' in '{parent.DotNetType}' could not resolve enum type" + }; + } + } + + // Try pattern registry lookup + if (patternRegistry.TryGetMappedType(types, parent.Name, out var mappedTypeObj)) + { + // Use the type directly from pattern registry + if (mappedTypeObj != null) + { + var resultType = mappedTypeObj switch + { + SimpleType st => st.DotNetType, + MappedCustomType mct => mct.DotNetType, + MappedEnumType met => met.DotNetType, + _ => "object" + }; + diagnosticCollector.RecordSupported(propertyPath, types, resultType); + return mappedTypeObj; + } + } + + // Check if partially supported + if (patternRegistry.IsPartiallySupported(types)) + { + Console.WriteLine($"INFO: Partially supported pattern '{string.Join(',', types)}' for '{propertyPath}' - using object"); + diagnosticCollector.RecordPartiallySupported( + propertyPath, + types, + "object", + patternRegistry.GenerateSuggestion(types) ?? "Consider implementing typed accessor pattern"); + return new SimpleType("object") + { + TypeWarning = $"Partially supported pattern '{string.Join(',', types)}' for '{prop.Name}'" + }; + } + } + + // Fallback: unsupported pattern + var typeList = string.Join(',', optProp.Types ?? Enumerable.Empty()); + if (optProp.Types?.Contains("enum") ?? false) + { + Console.WriteLine($"WARNING: {typeList} type '{prop.Name}' in '{parent.Name}' with values '{string.Join(',', optProp.EnumOptions ?? Array.Empty())}' is not mapped"); + diagnosticCollector.RecordUnsupported( + propertyPath, + types, + "object", + patternRegistry.GenerateSuggestion(types, string.Join(',', optProp.EnumOptions ?? Array.Empty()))); + } + else + { + Console.WriteLine($"ERROR: Failed to map property '{prop.Name}' in type '{parent.Name}' with types '{typeList}'"); + diagnosticCollector.RecordUnsupported( + propertyPath, + types, + "object", + patternRegistry.GenerateSuggestion(types)); + } + + return new SimpleType("object") + { + TypeWarning = $"Failed to map property '{prop.Name}' in type '{parent.Name}' with types '{typeList}'" + }; + } + + /// + /// Generate a diagnostic report after processing + /// + public DiagnosticReport GenerateDiagnosticReport() + { + return diagnosticCollector.GenerateReport(); + } + + protected bool CompareType(ObjectType lookupType, ObjectType objType) + { + var propNamesA = GetPropertyList(lookupType); + var propNamesB = GetPropertyList(objType); + + if (propNamesA != propNamesB) + { + Console.WriteLine($"!!! Type compare error: {lookupType.Name}"); + Console.WriteLine($"\tA: {propNamesA}"); + Console.WriteLine($"\tB: {propNamesB}"); + + //TODO return false; + } + + return true; + } + + /// + /// Detects if a property accepts both array and object types (e.g., Grid, XAxis, YAxis). + /// Returns true if: + /// 1. The property explicitly has both "array" and "object" types in option.json, OR + /// 2. The property is in the known MultiInstanceProperties list and has type "object" + /// + protected bool IsArrayAndObject(OptionProperty optProp) + { + // Explicit array+object declaration in option.json + if (optProp.Types != null && + optProp.Types.Contains("array") && + optProp.Types.Contains("object") && + optProp.Types.Count == 2) + { + return true; + } + + // Known multi-instance properties that option.json marks as only "object" + // but actually accept arrays in ECharts + if (optProp.Types != null && + optProp.Types.Count == 1 && + optProp.Types[0] == "object" && + MultiInstanceProperties.Contains(optProp.Name)) + { + // Check if this is a top-level property in ChartOptions + // ParentType might be null during initial parsing, so we also check if ParentType.Name is null/empty + if (optProp.ParentType == null || + string.IsNullOrEmpty(optProp.ParentType.Name) || + optProp.ParentType.Name == "ChartOptions" || + optProp.ParentType.Name == "option") + { + return true; + } + } + + return false; + } + + protected string GetPropertyList(ObjectType objectType) + { + var names = objectType.Properties.Select(p => p.Name).ToList(); + names.Sort(); + return string.Join(",", names); + } + + protected virtual string GetAnyOfType(JsonElement anyOfItemElement, string postfix) + { + if (!anyOfItemElement.TryGetProperty("properties", out var propertiesItem)) + throw new ArgumentException($"Could not determine properties element of {postfix} item"); + + if (!propertiesItem.TryGetProperty("type", out var typeElem)) + throw new ArgumentException($"Could not determine type of {postfix} item"); + + if (!typeElem.TryGetProperty("default", out var defaultElem)) + throw new ArgumentException($"Could not determine default type value of {postfix} item"); + + // for example: in transform parent --> this must resolve to TransformFilter + //"type": { + // "default": "'filter'", + // "description": "", + // "type": [ "string" ] + // } + + var cls = Helper.ToClassName(defaultElem.GetString()!.Trim('\'')); + + return cls + postfix; + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Phases/GenerateObjectTypesPhase.cs b/src/Vizor.ECharts.BindingGenerator/Phases/GenerateObjectTypesPhase.cs index 0442248b..39758da2 100644 --- a/src/Vizor.ECharts.BindingGenerator/Phases/GenerateObjectTypesPhase.cs +++ b/src/Vizor.ECharts.BindingGenerator/Phases/GenerateObjectTypesPhase.cs @@ -1,24 +1,25 @@ -using System.Data; -using System.Text.Json; -using Vizor.ECharts.BindingGenerator.Types; - -namespace Vizor.ECharts.BindingGenerator.Phases; - -internal class GenerateObjectTypesPhase : BasePhase -{ - public GenerateObjectTypesPhase(TypeCollection typeCollection) - : base(typeCollection) - { - } - - internal override void Run(JsonElement root) - { - if (root.TryGetProperty("properties", out var childProps)) - { - foreach (JsonProperty childProp in childProps.EnumerateObject()) - { - typeCollection.ChartOptions.Properties.Add(ParseProperty(typeCollection.ChartOptions, childProp)); - } - } - } -} +using System.Text.Json; + +using Vizor.ECharts.BindingGenerator.Diagnostics; +using Vizor.ECharts.BindingGenerator.Types; + +namespace Vizor.ECharts.BindingGenerator.Phases; + +internal class GenerateObjectTypesPhase : BasePhase +{ + public GenerateObjectTypesPhase(TypeCollection typeCollection, DiagnosticCollector diagnosticCollector) + : base(typeCollection, diagnosticCollector) + { + } + + internal override void Run(JsonElement root) + { + if (root.TryGetProperty("properties", out var childProps)) + { + foreach (JsonProperty childProp in childProps.EnumerateObject()) + { + typeCollection.ChartOptions.Properties.Add(ParseProperty(typeCollection.ChartOptions, childProp)); + } + } + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Program.cs b/src/Vizor.ECharts.BindingGenerator/Program.cs index b5457be7..69abc4e8 100644 --- a/src/Vizor.ECharts.BindingGenerator/Program.cs +++ b/src/Vizor.ECharts.BindingGenerator/Program.cs @@ -1,30 +1,31 @@ -using CommandLine; -using Vizor.ECharts.BindingGenerator; - -try -{ - Parser.Default.ParseArguments(args) - .MapResult( - (GenerateOptionBindingOptions opts) => new GenerateOptionBindingTool().Run(opts), - (GenerateTypeInfoOptions opts) => new GenerateTypeInfoTool().Run(opts), - errs => HandleParseError(errs) - ); -} -catch (Exception ex) -{ - Console.WriteLine(ex.Message); - Console.WriteLine(ex.StackTrace); -} - -static int HandleParseError(IEnumerable errs) -{ - foreach (Error err in errs) - { - if (err is HelpRequestedError || err is NoVerbSelectedError || err is HelpVerbRequestedError) - continue; - - Console.Error.WriteLine(err); - } - - return 1; +using CommandLine; + +using Vizor.ECharts.BindingGenerator; + +try +{ + Parser.Default.ParseArguments(args) + .MapResult( + (GenerateOptionBindingOptions opts) => new GenerateOptionBindingTool().Run(opts), + (GenerateTypeInfoOptions opts) => new GenerateTypeInfoTool().Run(opts), + errs => HandleParseError(errs) + ); +} +catch (Exception ex) +{ + Console.WriteLine(ex.Message); + Console.WriteLine(ex.StackTrace); +} + +static int HandleParseError(IEnumerable errs) +{ + foreach (Error err in errs) + { + if (err is HelpRequestedError || err is NoVerbSelectedError || err is HelpVerbRequestedError) + continue; + + Console.Error.WriteLine(err); + } + + return 1; } \ No newline at end of file diff --git a/src/Vizor.ECharts.BindingGenerator/Properties/launchSettings.json b/src/Vizor.ECharts.BindingGenerator/Properties/launchSettings.json index 13938631..0c86e7e9 100644 --- a/src/Vizor.ECharts.BindingGenerator/Properties/launchSettings.json +++ b/src/Vizor.ECharts.BindingGenerator/Properties/launchSettings.json @@ -2,7 +2,7 @@ "profiles": { "Vizor.ECharts.BindingGenerator": { "commandName": "Project", - "commandLineArgs": "option-binding --input \"C:\\Users\\Ben\\Downloads\\echarts-website\\en\\documents\\option.json\" --output \"D:\\Dev\\VizorECharts\\src\\Vizor.ECharts\"" + "commandLineArgs": "option-binding --input \"..\\src\\Vizor.ECharts.BindingGenerator\\echart-options\\5.6.0\\option.json\" --output \"src\\Vizor.EChartsGen\"" } } } \ No newline at end of file diff --git a/src/Vizor.ECharts.BindingGenerator/Readme.md b/src/Vizor.ECharts.BindingGenerator/Readme.md index c70d089b..0be4c178 100644 --- a/src/Vizor.ECharts.BindingGenerator/Readme.md +++ b/src/Vizor.ECharts.BindingGenerator/Readme.md @@ -1,9 +1,63 @@ -# Remarks +# Remarks This tool was used to generate 80-90% of the initial binding. It is good enough to generate the bulk of the bindings, but the last bits and pieces are hand tuned. So in general, you should never have to run this tool again. +## Hand-Tuned Overrides + +Some generated types are intentionally maintained as hand-coded overrides outside the Generated folders: + +### Example: Sankey Series +- **Generated**: `Series/Generated/Sankey/SankeySeriesLevels.cs` (plural) - auto-generated array wrapper +- **Hand-tuned**: `Series/Sankey/SankeySeriesLevel.cs` (singular) - manually maintained configuration type + +When the generator runs: +1. It regenerates `Series/Generated/Sankey/SankeySeriesLevels.cs` (array/list type) +2. The hand-coded `Series/Sankey/SankeySeriesLevel.cs` remains unchanged +3. Both can coexist because they have different names (singular vs plural) + +### Identifying Hand-Tuned Files +- **Auto-generated files**: Have `// AUTO GENERATED - DO NOT EDIT` header in `Generated/` subfolders +- **Hand-tuned files**: No `AUTO GENERATED` header, exist outside Generated folders (e.g., `Series/Sankey/*.cs`) +- Hand-tuned files are typically `partial class` that reference generated types + +### Maintaining Hand-Tuned Files +- Hand-tuned files should be updated manually when option.json changes affect their properties +- They are NOT automatically updated by the generator +- Check git history to see which files were moved out and customized during development + +## Polymorphic Interface Generation + +The generator automatically creates polymorphic interfaces using .NET 10's `[JsonPolymorphic]` serialization: + +### ISeries Interface +- **Location**: `Series/Generated/ISeries.cs` +- **Purpose**: Base interface for all series types (LineSeries, BarSeries, etc.) +- **Attributes**: + - `[JsonPolymorphic(TypeDiscriminatorPropertyName = "type")]` on interface + - `[JsonDerivedType(typeof(ConcreteType), "discriminator")]` for each series +- **Discriminators**: Extracted from `type` property default values in option.json +- **Result**: No explicit `Type` property needed in concrete series classes—serializer adds discriminator automatically + +### IDataZoom Interface +- **Location**: `Options/DataZoom/Generated/IDataZoom.cs` +- **Purpose**: Base interface for DataZoom types (InsideDataZoom, SliderDataZoom) +- **Pattern**: Same as ISeries—polymorphic serialization with discriminators +- **Result**: No explicit `Type` property in DataZoom classes + +### How It Works +1. **PolymorphicInterfaceGenerator** scans all types matching pattern (e.g., `*Series`, `*DataZoom`) +2. Extracts discriminator from each type's `type` property default value +3. Generates interface with `[JsonPolymorphic]` and all `[JsonDerivedType]` attributes +4. **ObjectTypeClassGenerator** skips `Type` property for these classes (discriminator handled by serializer) + +### Benefits +- Interfaces stay in sync with generated types automatically +- No manual maintenance of JsonDerivedType attributes +- Type-safe polymorphic serialization for List and List +- All properties serialize correctly (not just base interface properties) + # How to generate - Download the latest version of https://github.com/apache/echarts-doc diff --git a/src/Vizor.ECharts.BindingGenerator/TypePatternAnalysisReport.md b/src/Vizor.ECharts.BindingGenerator/TypePatternAnalysisReport.md new file mode 100644 index 00000000..8e4337e1 --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/TypePatternAnalysisReport.md @@ -0,0 +1,54 @@ +# Type Pattern Analysis Report +Generated: 2026-01-10 22:18:58 + +## Summary +- Total properties analyzed: 37348 +- ✅ Fully supported: 37330 (100%) +- ⚠️ Partially supported: 2 (0%) +- ❌ Unsupported: 16 (0%) +- 🔍 Requires investigation: 0 (0%) + +## Unsupported Patterns (Sorted by Frequency) + +### array,enum,number (4 occurrences) +**Examples**: crossStyle.type, crossStyle.type, crossStyle.type +**Suggestion**: Pattern 'array,enum,number' is complex - investigate if typed accessor pattern is appropriate + +### color,number (3 occurrences) +**Examples**: itemStyle.borderColorSaturation, itemStyle.borderColorSaturation, itemStyle.borderColorSaturation +**Suggestion**: Create custom union type: ColorOrNumber (see NumberOrString pattern for template) + +### array,enum (2 occurrences) +**Examples**: dayLabel.nameMap, monthLabel.nameMap +**Suggestion**: Create custom union type: ArrayOrEnum (see NumberOrString pattern for template) + +### number,percentvector,string (2 occurrences) +**Examples**: PictorialBarSeries.symbolMargin, PictorialBarSeriesData.symbolMargin +**Suggestion**: Pattern 'number,percentvector,string' is complex - investigate if typed accessor pattern is appropriate + +### *,number (1 occurrences) +**Examples**: PiecewiseVisualMap.itemGap +**Suggestion**: Investigate if a custom type is needed + +### function,htmlelement,string (1 occurrences) +**Examples**: tooltip.appendTo +**Suggestion**: Pattern 'function,htmlelement,string' is complex - investigate if typed accessor pattern is appropriate + +### array,object (1 occurrences) +**Examples**: dataset.source +**Suggestion**: Create custom union type: ArrayOrObject (see NumberOrString pattern for template) + +### enum,number (1 occurrences) +**Examples**: areaStyle.origin +**Suggestion**: Create custom union type: EnumOrNumber (see NumberOrString pattern for template) + +### boolean,object (1 occurrences) +**Examples**: PieSeries.emptyCircleStyle +**Suggestion**: Create custom union type: BooleanOrObject (see NumberOrString pattern for template) + +## Partially Supported Patterns (Typed Accessor Pattern) + +### enum,function (2 occurrences) +**Pattern**: object? with typed accessors +**Examples**: SunburstSeries.sort, FunnelSeries.sort + diff --git a/src/Vizor.ECharts.BindingGenerator/Types/DataListType.cs b/src/Vizor.ECharts.BindingGenerator/Types/DataListType.cs new file mode 100644 index 00000000..418ea248 --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Types/DataListType.cs @@ -0,0 +1,21 @@ +namespace Vizor.ECharts.BindingGenerator.Types; + +/// +/// Represents a DataList{T} type for option data properties (Legend.Data, Axis.Data, etc.). +/// Enables implicit conversion from arrays to data lists. +/// +internal class DataListType : IPropertyType +{ + private readonly IPropertyType genericArgument; + + public DataListType(IPropertyType genericArgument) + { + this.genericArgument = genericArgument; + } + + public string Name => "array"; + + public string DotNetType => $"DataList<{genericArgument.DotNetType}>"; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/EnumOrFunctionType.cs b/src/Vizor.ECharts.BindingGenerator/Types/EnumOrFunctionType.cs new file mode 100644 index 00000000..b3af456d --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Types/EnumOrFunctionType.cs @@ -0,0 +1,31 @@ +namespace Vizor.ECharts.BindingGenerator.Types; + +/// +/// Represents a type that can be either an enum or a JavascriptFunction. +/// Used for properties like FunnelSeries.Sort, SunburstSeries.Sort where ECharts accepts enum values OR custom functions. +/// Generates three properties: ObjectBackingField, EnumAccessor, and FunctionAccessor. +/// +internal class EnumOrFunctionType : IPropertyType +{ + public EnumOrFunctionType(string enumTypeName) + { + EnumTypeName = enumTypeName; + } + + /// + /// The name of the enum type (e.g., "FunnelSortOrder", "SortOrder") + /// + public string EnumTypeName { get; } + + /// + /// Returns "EnumOrFunction" to identify this special type + /// + public string Name => "EnumOrFunction"; + + /// + /// The backing field type is always "object" to support both enum and function forms + /// + public string DotNetType => "object"; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/GenericListType.cs b/src/Vizor.ECharts.BindingGenerator/Types/GenericListType.cs index e2358139..93406a6d 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/GenericListType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/GenericListType.cs @@ -1,17 +1,17 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class GenericListType : IPropertyType -{ - private readonly IPropertyType genericArgument; - - public GenericListType(IPropertyType genericArgument) - { - this.genericArgument = genericArgument; - } - - public string Name => "array"; - - public string DotNetType => $"List<{genericArgument.DotNetType}>"; - - public string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class GenericListType : IPropertyType +{ + private readonly IPropertyType genericArgument; + + public GenericListType(IPropertyType genericArgument) + { + this.genericArgument = genericArgument; + } + + public string Name => "array"; + + public string DotNetType => $"List<{genericArgument.DotNetType}>"; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/IObjectType.cs b/src/Vizor.ECharts.BindingGenerator/Types/IObjectType.cs index 32e78f83..69492386 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/IObjectType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/IObjectType.cs @@ -1,8 +1,8 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal interface IObjectType : IPropertyType -{ - List Properties { get; } - - string Path { get; } +namespace Vizor.ECharts.BindingGenerator.Types; + +internal interface IObjectType : IPropertyType +{ + List Properties { get; } + + string Path { get; } } \ No newline at end of file diff --git a/src/Vizor.ECharts.BindingGenerator/Types/IPropertyType.cs b/src/Vizor.ECharts.BindingGenerator/Types/IPropertyType.cs index 601814da..d6a2990a 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/IPropertyType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/IPropertyType.cs @@ -1,10 +1,10 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal interface IPropertyType -{ - string Name { get; } - - string DotNetType { get; } - - string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal interface IPropertyType +{ + string Name { get; } + + string DotNetType { get; } + + string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/MappedCustomType.cs b/src/Vizor.ECharts.BindingGenerator/Types/MappedCustomType.cs index 762c159f..7ab2c4a8 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/MappedCustomType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/MappedCustomType.cs @@ -1,17 +1,17 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class MappedCustomType : IPropertyType -{ - public MappedCustomType(Type customType) - { - CustomType = customType; - } - - public string Name => CustomType.Name; - - public string DotNetType => CustomType.Name; - - public Type CustomType { get; } - - public string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class MappedCustomType : IPropertyType +{ + public MappedCustomType(Type customType) + { + CustomType = customType; + } + + public string Name => CustomType.Name; + + public string DotNetType => CustomType.Name; + + public Type CustomType { get; } + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/MappedEnumType.cs b/src/Vizor.ECharts.BindingGenerator/Types/MappedEnumType.cs index aaf20704..06f6666d 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/MappedEnumType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/MappedEnumType.cs @@ -1,17 +1,17 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class MappedEnumType : IPropertyType -{ - public MappedEnumType(string name, Type type) - { - Name = name; - EnumType = type; - } - - public string Name { get; } - public Type EnumType { get; } - - public string DotNetType => EnumType.Name; - - public string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class MappedEnumType : IPropertyType +{ + public MappedEnumType(string name, Type type) + { + Name = name; + EnumType = type; + } + + public string Name { get; } + public Type EnumType { get; } + + public string DotNetType => EnumType.Name; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/ObjectListType.cs b/src/Vizor.ECharts.BindingGenerator/Types/ObjectListType.cs index ab3ae07d..9303e3a4 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/ObjectListType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/ObjectListType.cs @@ -1,14 +1,14 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class ObjectListType : IPropertyType -{ - public ObjectListType() - { - } - - public string Name => "array"; - - public string DotNetType => "List"; - - public string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class ObjectListType : IPropertyType +{ + public ObjectListType() + { + } + + public string Name => "array"; + + public string DotNetType => "List"; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/ObjectType.cs b/src/Vizor.ECharts.BindingGenerator/Types/ObjectType.cs index 71421bba..f1c8937f 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/ObjectType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/ObjectType.cs @@ -1,36 +1,37 @@ -using System.Diagnostics; -using System.Text.Json; -using System.Xml.Linq; - -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class ObjectType : IPropertyType, IObjectType -{ - public ObjectType(OptionProperty? parent, string name, string typeGroup) - { - Parent = parent; - Name = name; - TypeGroup = typeGroup; - DotNetType = Helper.ToClassName(name); - } - - public ObjectType(OptionProperty? parent, string name, string dotNetType, string typeGroup) - { - Parent = parent; - Name = name; - DotNetType = dotNetType; - TypeGroup = typeGroup; - } - - public OptionProperty? Parent { get; } - public string Name { get; } - public string DotNetType { get; } - - public string TypeGroup { get; set; } - - public List Properties { get; } = new List(); - - public string Path => Parent == null ? string.Empty : Parent.Path + "." + Name; - - public string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class ObjectType : IPropertyType, IObjectType +{ + public ObjectType(OptionProperty? parent, string name, string typeGroup) + { + Parent = parent; + Name = name; + TypeGroup = typeGroup; + DotNetType = Helper.ToClassName(name); + } + + public ObjectType(OptionProperty? parent, string name, string dotNetType, string typeGroup) + { + Parent = parent; + Name = name; + DotNetType = dotNetType; + TypeGroup = typeGroup; + } + + public OptionProperty? Parent { get; } + public string Name { get; } + public string DotNetType { get; } + + public string TypeGroup { get; set; } + + public List Properties { get; } = new List(); + + public string Path => Parent == null ? string.Empty : Parent.Path + "." + Name; + + public string? TypeWarning { get; set; } + + /// + /// Indicates this is a shared hand-coded type that should not be generated. + /// + public bool IsShared { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/OptionProperty.cs b/src/Vizor.ECharts.BindingGenerator/Types/OptionProperty.cs index b9454b23..4daf1e9e 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/OptionProperty.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/OptionProperty.cs @@ -1,59 +1,59 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class OptionProperty -{ - public OptionProperty(ObjectType? parentType, string name, string propertyName) - { - ParentType = parentType; - Name = name; - PropertyName = propertyName; - } - - private readonly List types = new(); - - public ObjectType? ParentType { get; } - public string Name { get; set; } - - public string PropertyName { get; set; } - - public string? Description { get; set; } - - public IReadOnlyList Types => types; - - public object? Default { get; set; } - - public string[]? EnumOptions { get; set; } - - public IPropertyType? MappedType { get; set; } - - public IPropertyType? ItemType { get; set; } - - public string Path => ParentType == null ? string.Empty : ParentType.Path; - - public void RemoveType(string name) - { - types.RemoveAll(item => item == name); - } - - public void AddType(string name) - { - if (!types.Contains(name)) - { - types.Add(name); - types.Sort(); - } - } - - public void AddTypes(IEnumerable names) - { - foreach (var name in names) - { - if (!types.Contains(name)) - { - types.Add(name); - } - } - - types.Sort(); - } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class OptionProperty +{ + public OptionProperty(ObjectType? parentType, string name, string propertyName) + { + ParentType = parentType; + Name = name; + PropertyName = propertyName; + } + + private readonly List types = new(); + + public ObjectType? ParentType { get; } + public string Name { get; set; } + + public string PropertyName { get; set; } + + public string? Description { get; set; } + + public IReadOnlyList Types => types; + + public object? Default { get; set; } + + public string[]? EnumOptions { get; set; } + + public IPropertyType? MappedType { get; set; } + + public IPropertyType? ItemType { get; set; } + + public string Path => ParentType == null ? string.Empty : ParentType.Path; + + public void RemoveType(string name) + { + types.RemoveAll(item => item == name); + } + + public void AddType(string name) + { + if (!types.Contains(name)) + { + types.Add(name); + types.Sort(); + } + } + + public void AddTypes(IEnumerable names) + { + foreach (var name in names) + { + if (!types.Contains(name)) + { + types.Add(name); + } + } + + types.Sort(); + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/SeriesDataListType.cs b/src/Vizor.ECharts.BindingGenerator/Types/SeriesDataListType.cs new file mode 100644 index 00000000..fd37ca2f --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Types/SeriesDataListType.cs @@ -0,0 +1,17 @@ +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class SeriesDataListType : IPropertyType +{ + private readonly IPropertyType genericArgument; + + public SeriesDataListType(IPropertyType genericArgument) + { + this.genericArgument = genericArgument; + } + + public string Name => "array"; + + public string DotNetType => $"SeriesDataList<{genericArgument.DotNetType}>"; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/SimpleType.cs b/src/Vizor.ECharts.BindingGenerator/Types/SimpleType.cs index 6a4e228b..6353a9db 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/SimpleType.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/SimpleType.cs @@ -1,15 +1,15 @@ -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class SimpleType : IPropertyType -{ - public SimpleType(string mappedType) - { - Name = DotNetType = mappedType; - } - - public string Name { get; } - - public string DotNetType { get; } - - public string? TypeWarning { get; set; } -} +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class SimpleType : IPropertyType +{ + public SimpleType(string mappedType) + { + Name = DotNetType = mappedType; + } + + public string Name { get; } + + public string DotNetType { get; } + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/SingleOrArrayType.cs b/src/Vizor.ECharts.BindingGenerator/Types/SingleOrArrayType.cs new file mode 100644 index 00000000..dc647ccb --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Types/SingleOrArrayType.cs @@ -0,0 +1,31 @@ +namespace Vizor.ECharts.BindingGenerator.Types; + +/// +/// Represents a type that can be either a single object or an array of objects. +/// Used for properties like Grid, XAxis, YAxis where ECharts accepts both single and array forms. +/// Generates three properties: ObjectBackingField, SingleAccessor, and ListAccessor. +/// +internal class SingleOrArrayType : IPropertyType +{ + public SingleOrArrayType(string innerTypeName) + { + InnerTypeName = innerTypeName; + } + + /// + /// The name of the inner type (e.g., "Grid", "XAxis", "YAxis") + /// + public string InnerTypeName { get; } + + /// + /// Returns "SingleOrArray" to identify this special type + /// + public string Name => "SingleOrArray"; + + /// + /// The backing field type is always "object" to support both single and array forms + /// + public string DotNetType => "object"; + + public string? TypeWarning { get; set; } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs b/src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs index 1fe5bcfa..9f9bb377 100644 --- a/src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs +++ b/src/Vizor.ECharts.BindingGenerator/Types/TypeCollection.cs @@ -1,248 +1,310 @@ -using System.Text.Json; -using Vizor.ECharts; - -namespace Vizor.ECharts.BindingGenerator.Types; - -internal class TypeCollection -{ - private readonly Dictionary> enumTypesMappedByName = new(); - - private readonly Dictionary> allObjectTypesWithDuplicates = new(); - private readonly Dictionary objectTypeLookup = new(); - - private readonly ObjectType chartOptions = new(null, "", "ChartOptions", "Options"); - - public TypeCollection() - { - AddMappedEnumType(new MappedEnumType("align", typeof(HorizontalAlign))); - AddMappedEnumType(new MappedEnumType("animationEasing", typeof(AnimationEasing))); - AddMappedEnumType(new MappedEnumType("animationEasingUpdate", typeof(AnimationEasing))); - AddMappedEnumType(new MappedEnumType("animationType", typeof(AnimationType))); - AddMappedEnumType(new MappedEnumType("animationTypeUpdate", typeof(AnimationTypeUpdate))); - AddMappedEnumType(new MappedEnumType("axisExpandTriggerOn", typeof(TriggerOn))); - AddMappedEnumType(new MappedEnumType("axisPosition", typeof(TopOrBottom))); - AddMappedEnumType(new MappedEnumType("axisSymbol", typeof(AxisSymbol))); - AddMappedEnumType(new MappedEnumType("axisType", typeof(AxisType))); - AddMappedEnumType(new MappedEnumType("blendMode", typeof(BlendMode))); - AddMappedEnumType(new MappedEnumType("borderCap", typeof(LineCap))); - AddMappedEnumType(new MappedEnumType("borderJoin", typeof(LineJoin))); - AddMappedEnumType(new MappedEnumType("borderRadius", typeof(Radius))); - AddMappedEnumType(new MappedEnumType("borderType", typeof(LineType))); - AddMappedEnumType(new MappedEnumType("boundaryGap", typeof(BoundaryGap))); - AddMappedEnumType(new MappedEnumType("brushType", typeof(BrushType))); - AddMappedEnumType(new MappedEnumType("colorBy", typeof(ColorBy))); - AddMappedEnumType(new MappedEnumType("colorMappingBy", typeof(ColorMappingBy))); - AddMappedEnumType(new MappedEnumType("emphasisBlurScope", typeof(EmphasisBlurScope))); - AddMappedEnumType(new MappedEnumType("emphasisFocus", typeof(EmphasisFocus))); - AddMappedEnumType(new MappedEnumType("fontStyle", typeof(FontStyle))); - AddMappedEnumType(new MappedEnumType("fontWeight", typeof(FontWeight))); - AddMappedEnumType(new MappedEnumType("horizontalAlign", typeof(HorizontalAlign))); - AddMappedEnumType(new MappedEnumType("icon", typeof(Icon))); - AddMappedEnumType(new MappedEnumType("legendType", typeof(LegendType))); - AddMappedEnumType(new MappedEnumType("lineCoordinateSystem", typeof(LineCoordinateSystem))); - AddMappedEnumType(new MappedEnumType("lineType", typeof(LineType))); - AddMappedEnumType(new MappedEnumType("nameLocation", typeof(NameLocation))); - AddMappedEnumType(new MappedEnumType("orient", typeof(Orient))); - AddMappedEnumType(new MappedEnumType("orthogonalOrient", typeof(OrthogonalOrient))); - AddMappedEnumType(new MappedEnumType("overflow", typeof(Overflow))); - AddMappedEnumType(new MappedEnumType("padding", typeof(Padding))); - AddMappedEnumType(new MappedEnumType("radius", typeof(Radius))); - AddMappedEnumType(new MappedEnumType("roam", typeof(Roam))); - AddMappedEnumType(new MappedEnumType("selectedMode", typeof(SelectionMode))); - AddMappedEnumType(new MappedEnumType("selector", typeof(Selector))); - AddMappedEnumType(new MappedEnumType("seriesLayoutBy", typeof(SeriesLayoutBy))); - AddMappedEnumType(new MappedEnumType("showEffectOn", typeof(ShowEffectOn))); - AddMappedEnumType(new MappedEnumType("stackStrategy", typeof(StackStrategy))); - AddMappedEnumType(new MappedEnumType("step", typeof(Step))); - AddMappedEnumType(new MappedEnumType("textAlign", typeof(HorizontalAlign))); - AddMappedEnumType(new MappedEnumType("textBorderType", typeof(LineType))); - AddMappedEnumType(new MappedEnumType("textBorderRadius", typeof(Radius))); - AddMappedEnumType(new MappedEnumType("textPadding", typeof(Padding))); - AddMappedEnumType(new MappedEnumType("textVerticalAlign", typeof(VerticalAlign))); - AddMappedEnumType(new MappedEnumType("tooltipOrder", typeof(TooltipOrder))); - AddMappedEnumType(new MappedEnumType("tooltipRenderMode", typeof(RenderMode))); - AddMappedEnumType(new MappedEnumType("tooltipTrigger", typeof(TooltipTrigger))); - AddMappedEnumType(new MappedEnumType("tooltipTriggerOn", typeof(TriggerOn))); - AddMappedEnumType(new MappedEnumType("triggerOn", typeof(TriggerOn))); - AddMappedEnumType(new MappedEnumType("treeLayout", typeof(TreeLayout))); - AddMappedEnumType(new MappedEnumType("verticalAlign", typeof(VerticalAlign))); - - - - AddMappedEnumType(new MappedEnumType("type", typeof(LineType)), "lineStyle"); - AddMappedEnumType(new MappedEnumType("type", typeof(LegendType)), "legend"); - AddMappedEnumType(new MappedEnumType("type", typeof(ImageType)), "saveAsImage"); - AddMappedEnumType(new MappedEnumType("type", typeof(AxisPointerType)), "axisPointer"); - AddMappedEnumType(new MappedEnumType("type", typeof(MarkPointType)), "markPointData"); - - AddMappedEnumType(new MappedEnumType("cap", typeof(LineCap)), "lineStyle", "crossStyle", "ParallelSeriesData"); - AddMappedEnumType(new MappedEnumType("join", typeof(LineJoin)), "lineStyle", "crossStyle", "ParallelSeriesData"); - - AddMappedEnumType(new MappedEnumType("order", typeof(TooltipOrder)), "tooltip"); - AddMappedEnumType(new MappedEnumType("renderMode", typeof(RenderMode)), "tooltip"); - AddMappedEnumType(new MappedEnumType("trigger", typeof(TooltipTrigger)), "tooltip"); - - AddMappedEnumType(new MappedEnumType("position", typeof(TopOrBottom)), "xAxis"); - AddMappedEnumType(new MappedEnumType("shape", typeof(RadarShape)), "radar"); - - AddMappedEnumType(new MappedEnumType("status", typeof(AxisPointerStatus)), "axisPointer"); - AddMappedEnumType(new MappedEnumType("symbol", typeof(AxisLineSymbol)), "axisLine"); - - AddMappedEnumType(new MappedEnumType("alignTo", typeof(LabelAlignTo)), "label"); - - AddMappedEnumType(new MappedEnumType("selectorPosition", typeof(StartOrEnd)), "legend"); - AddMappedEnumType(new MappedEnumType("position", typeof(StartOrEnd)), "dayLabel"); - AddMappedEnumType(new MappedEnumType("position", typeof(StartOrEnd)), "monthLabel"); - AddMappedEnumType(new MappedEnumType("position", typeof(Position)), "yearLabel"); - AddMappedEnumType(new MappedEnumType("position", typeof(Position)), "controlStyle"); - AddMappedEnumType(new MappedEnumType("position", typeof(LeftOrRight)), "yAxis"); - AddMappedEnumType(new MappedEnumType("controlPosition", typeof(LeftOrRight)), "timeline"); - AddMappedEnumType(new MappedEnumType("layout", typeof(HorizontalOrVertical)), "parallel"); - AddMappedEnumType(new MappedEnumType("position", typeof(LabelPosition)), "label", "upperLabel"); - - AddMappedEnumType(new MappedEnumType("seriesIndex", typeof(MultiIndex)), "brush"); - AddMappedEnumType(new MappedEnumType("geoIndex", typeof(MultiIndex)), "brush"); - AddMappedEnumType(new MappedEnumType("xAxisIndex", typeof(MultiIndex)), "brush", "dataZoom"); - AddMappedEnumType(new MappedEnumType("yAxisIndex", typeof(MultiIndex)), "brush", "dataZoom"); - - - - AddMappedEnumType(new MappedEnumType("layout", typeof(TreeLayout)), "TreeSeries"); - AddMappedEnumType(new MappedEnumType("edgeShape", typeof(TreeEdgeShape)), "TreeSeries"); - - AddMappedEnumType(new MappedEnumType("funnelAlign", typeof(FunnelAlign)), "FunnelSeries"); - - AddMappedEnumType(new MappedEnumType("nodeAlign", typeof(SankeyNodeAlign)), "SankeySeries"); - - AddMappedEnumType(new MappedEnumType("layout", typeof(GraphLayout)), "GraphSeries"); - - AddMappedEnumType(new MappedEnumType("nodeClick", typeof(SunburstNodeClick)), "SunburstSeries"); - - AddMappedEnumType(new MappedEnumType("symbolRepeatDirection", typeof(StartOrEnd)), "PictorialBarSeries", "PictorialBarSeriesData"); - AddMappedEnumType(new MappedEnumType("symbolPosition", typeof(StartOrEndOrCenter)), "PictorialBarSeries", "PictorialBarSeriesData"); - AddMappedEnumType(new MappedEnumType("symbolRepeat", typeof(PictorialSymbolRepeat)), "PictorialBarSeries", "PictorialBarSeriesData"); - - AddMappedEnumType(new MappedEnumType("effectType", typeof(ScatterEffectType)), "EffectScatterSeries"); - - AddMappedEnumType(new MappedEnumType("roseType", typeof(PieRoseType)), "PieSeries"); - AddMappedEnumType(new MappedEnumType("radius", typeof(PieRadius)), "PieSeries"); - AddMappedEnumType(new MappedEnumType("center", typeof(PieCenter)), "PieSeries"); - - AddMappedEnumType(new MappedEnumType("filterMode", typeof(DataZoomFilterMode)), "InsideDataZoom", "SliderDataZoom"); - AddMappedEnumType(new MappedEnumType("zoomOnMouseWheel", typeof(DataZoomOnMouse)), "InsideDataZoom"); - AddMappedEnumType(new MappedEnumType("moveOnMouseMove", typeof(DataZoomOnMouse)), "InsideDataZoom"); - AddMappedEnumType(new MappedEnumType("moveOnMouseWheel", typeof(DataZoomOnMouse)), "InsideDataZoom"); - } - - public ObjectType ChartOptions => chartOptions; - - public IReadOnlyDictionary> TypesWithDuplicates => allObjectTypesWithDuplicates; - - public IEnumerable ListObjectTypesToGenerate() - { - yield return chartOptions; - - foreach (var objectType in objectTypeLookup.Values) - yield return objectType; - } - - public bool TryGetObjectType(string name, out ObjectType? objectType) => objectTypeLookup.TryGetValue(name, out objectType); - - public IPropertyType? MapArrayType(ObjectType parent, OptionProperty optProp, JsonProperty prop) - { - // did we succeed in determining the item type ? - if (optProp.ItemType != null) - { - return new GenericListType(optProp.ItemType); - } - - // special cases: these are often aliases - switch (prop.Name, parent.Name) - { - case ("nodes", "SankeySeries"): - return new GenericListType(new SimpleType("SankeySeriesData")); - case ("edges", "SankeySeries"): - return new GenericListType(new SimpleType("SankeySeriesLinks")); - case ("nodes", "GraphSeries"): - return new GenericListType(new SimpleType("GraphSeriesData")); - case ("edges", "GraphSeries"): - return new GenericListType(new SimpleType("GraphSeriesLinks")); - } - - //Console.WriteLine($"WARNING: array type '{prop.Name}' in '{parent.Name}' will be mapped to List"); - return new ObjectListType() - { - TypeWarning = $"array type '{prop.Name}' in '{parent.Name}' will be mapped to List" - }; - } - - public bool TryGetMappedEnumType(string name, string parentName, out MappedEnumType? mappedEnumType) - { - if (enumTypesMappedByName.TryGetValue(name, out var typeDict)) - { - // specific mapping for the parent type - if (typeDict.TryGetValue(parentName, out mappedEnumType)) - return true; - - // non-specific mapping for the parent type - if (typeDict.TryGetValue("*", out mappedEnumType)) - return true; - - //TODO: sanity check for enum types - } - - mappedEnumType = null; - return false; - } - - public void TrackType(ObjectType objectType) - { - if (!allObjectTypesWithDuplicates.TryGetValue(objectType.Name, out var list)) - { - list = new List(); - allObjectTypesWithDuplicates.Add(objectType.Name, list); - } - - list.Add(objectType); - } - - public ObjectType MergeType(ObjectType objectType) - { - if (!objectTypeLookup.TryGetValue(objectType.Name, out var mergedType)) - { - mergedType = new ObjectType(null, objectType.Name, typeGroup: objectType.TypeGroup); // merged types have many parents, so set parent to null - objectTypeLookup.Add(mergedType.Name, mergedType); - } - - foreach (var property in objectType.Properties) - { - if (!mergedType.Properties.Any(p => p.Name == property.Name)) - { - mergedType.Properties.Add(property); - } - } - - return mergedType; - } - - private void AddMappedEnumType(MappedEnumType mappedType, params string[]? specificObjectTypes) - { - if (!enumTypesMappedByName.TryGetValue(mappedType.Name, out var typeDict)) - { - typeDict = new Dictionary(); - enumTypesMappedByName.Add(mappedType.Name, typeDict); - } - - if (specificObjectTypes == null || specificObjectTypes.Length == 0) - { - typeDict.Add("*", mappedType); - } - else - { - foreach (var specificType in specificObjectTypes) - { - typeDict.Add(specificType, mappedType); - } - } - } -} +using System.Text.Json; + +namespace Vizor.ECharts.BindingGenerator.Types; + +internal class TypeCollection +{ + private readonly Dictionary> enumTypesMappedByName = new(); + + private readonly Dictionary> allObjectTypesWithDuplicates = new(); + private readonly Dictionary objectTypeLookup = new(); + + private readonly ObjectType chartOptions = new(null, "", "ChartOptions", "Options"); + + public TypeCollection() + { + AddMappedEnumType(new MappedEnumType("align", typeof(HorizontalAlign))); + AddMappedEnumType(new MappedEnumType("animationEasing", typeof(AnimationEasing))); + AddMappedEnumType(new MappedEnumType("animationEasingUpdate", typeof(AnimationEasing))); + AddMappedEnumType(new MappedEnumType("animationType", typeof(AnimationType))); + AddMappedEnumType(new MappedEnumType("animationTypeUpdate", typeof(AnimationTypeUpdate))); + AddMappedEnumType(new MappedEnumType("axisExpandTriggerOn", typeof(TriggerOn))); + AddMappedEnumType(new MappedEnumType("axisPosition", typeof(TopOrBottom))); + AddMappedEnumType(new MappedEnumType("axisSymbol", typeof(AxisSymbol))); + AddMappedEnumType(new MappedEnumType("axisType", typeof(AxisType))); + AddMappedEnumType(new MappedEnumType("blendMode", typeof(BlendMode))); + AddMappedEnumType(new MappedEnumType("borderCap", typeof(LineCap))); + AddMappedEnumType(new MappedEnumType("borderJoin", typeof(LineJoin))); + AddMappedEnumType(new MappedEnumType("borderRadius", typeof(BorderRadius))); + AddMappedEnumType(new MappedEnumType("borderType", typeof(LineType))); + AddMappedEnumType(new MappedEnumType("boundaryGap", typeof(BoundaryGap))); + AddMappedEnumType(new MappedEnumType("brushType", typeof(BrushType))); + AddMappedEnumType(new MappedEnumType("colorBy", typeof(ColorBy))); + AddMappedEnumType(new MappedEnumType("colorMappingBy", typeof(ColorMappingBy))); + AddMappedEnumType(new MappedEnumType("emphasisBlurScope", typeof(EmphasisBlurScope))); + AddMappedEnumType(new MappedEnumType("emphasisFocus", typeof(EmphasisFocus))); + AddMappedEnumType(new MappedEnumType("fontStyle", typeof(FontStyle))); + AddMappedEnumType(new MappedEnumType("fontWeight", typeof(FontWeight))); + AddMappedEnumType(new MappedEnumType("horizontalAlign", typeof(HorizontalAlign))); + AddMappedEnumType(new MappedEnumType("icon", typeof(Icon))); + AddMappedEnumType(new MappedEnumType("legendType", typeof(LegendType))); + AddMappedEnumType(new MappedEnumType("lineCoordinateSystem", typeof(LineCoordinateSystem))); + AddMappedEnumType(new MappedEnumType("lineType", typeof(LineType))); + AddMappedEnumType(new MappedEnumType("nameLocation", typeof(NameLocation))); + AddMappedEnumType(new MappedEnumType("orient", typeof(Orient))); + AddMappedEnumType(new MappedEnumType("orthogonalOrient", typeof(OrthogonalOrient))); + AddMappedEnumType(new MappedEnumType("overflow", typeof(Overflow))); + AddMappedEnumType(new MappedEnumType("padding", typeof(Padding))); + AddMappedEnumType(new MappedEnumType("radius", typeof(CircleRadius))); + AddMappedEnumType(new MappedEnumType("roam", typeof(Roam))); + AddMappedEnumType(new MappedEnumType("selectedMode", typeof(SelectionMode))); + AddMappedEnumType(new MappedEnumType("selector", typeof(Selector))); + AddMappedEnumType(new MappedEnumType("seriesLayoutBy", typeof(SeriesLayoutBy))); + AddMappedEnumType(new MappedEnumType("showEffectOn", typeof(ShowEffectOn))); + AddMappedEnumType(new MappedEnumType("stackStrategy", typeof(StackStrategy))); + AddMappedEnumType(new MappedEnumType("step", typeof(Step))); + AddMappedEnumType(new MappedEnumType("textAlign", typeof(HorizontalAlign))); + AddMappedEnumType(new MappedEnumType("textBorderType", typeof(LineType))); + AddMappedEnumType(new MappedEnumType("textBorderRadius", typeof(BorderRadius))); + AddMappedEnumType(new MappedEnumType("textPadding", typeof(Padding))); + AddMappedEnumType(new MappedEnumType("textVerticalAlign", typeof(VerticalAlign))); + AddMappedEnumType(new MappedEnumType("tooltipOrder", typeof(TooltipOrder))); + AddMappedEnumType(new MappedEnumType("renderMode", typeof(TooltipRenderMode))); + AddMappedEnumType(new MappedEnumType("tooltipTrigger", typeof(TooltipTrigger))); + AddMappedEnumType(new MappedEnumType("tooltipTriggerOn", typeof(TriggerOn))); + AddMappedEnumType(new MappedEnumType("triggerOn", typeof(TriggerOn))); + AddMappedEnumType(new MappedEnumType("treeLayout", typeof(TreeLayout))); + AddMappedEnumType(new MappedEnumType("verticalAlign", typeof(VerticalAlign))); + + + + AddMappedEnumType(new MappedEnumType("type", typeof(LineType)), "lineStyle"); + AddMappedEnumType(new MappedEnumType("type", typeof(LegendType)), "legend"); + AddMappedEnumType(new MappedEnumType("type", typeof(ImageType)), "saveAsImage"); + AddMappedEnumType(new MappedEnumType("type", typeof(AxisPointerType)), "axisPointer"); + AddMappedEnumType(new MappedEnumType("type", typeof(MarkPointType)), "markPointData"); + + AddMappedEnumType(new MappedEnumType("cap", typeof(LineCap)), "lineStyle", "crossStyle", "ParallelSeriesData"); + AddMappedEnumType(new MappedEnumType("join", typeof(LineJoin)), "lineStyle", "crossStyle", "ParallelSeriesData"); + + AddMappedEnumType(new MappedEnumType("order", typeof(TooltipOrder)), "tooltip"); + AddMappedEnumType(new MappedEnumType("renderMode", typeof(TooltipRenderMode)), "tooltip"); + AddMappedEnumType(new MappedEnumType("trigger", typeof(TooltipTrigger)), "tooltip"); + + AddMappedEnumType(new MappedEnumType("position", typeof(TopOrBottom)), "xAxis"); + AddMappedEnumType(new MappedEnumType("shape", typeof(RadarShape)), "radar"); + + AddMappedEnumType(new MappedEnumType("status", typeof(AxisPointerStatus)), "axisPointer"); + AddMappedEnumType(new MappedEnumType("symbol", typeof(AxisLineSymbol)), "axisLine"); + + AddMappedEnumType(new MappedEnumType("alignTo", typeof(LabelAlignTo)), "label"); + + AddMappedEnumType(new MappedEnumType("selectorPosition", typeof(StartOrEnd)), "legend"); + AddMappedEnumType(new MappedEnumType("position", typeof(StartOrEnd)), "dayLabel"); + AddMappedEnumType(new MappedEnumType("position", typeof(StartOrEnd)), "monthLabel"); + AddMappedEnumType(new MappedEnumType("position", typeof(Position)), "yearLabel"); + AddMappedEnumType(new MappedEnumType("position", typeof(Position)), "controlStyle"); + AddMappedEnumType(new MappedEnumType("position", typeof(LeftOrRight)), "yAxis"); + AddMappedEnumType(new MappedEnumType("controlPosition", typeof(LeftOrRight)), "timeline"); + AddMappedEnumType(new MappedEnumType("layout", typeof(HorizontalOrVertical)), "parallel"); + AddMappedEnumType(new MappedEnumType("position", typeof(LabelPosition)), "label", "upperLabel"); + + AddMappedEnumType(new MappedEnumType("seriesIndex", typeof(MultiIndex)), "brush"); + AddMappedEnumType(new MappedEnumType("geoIndex", typeof(MultiIndex)), "brush"); + AddMappedEnumType(new MappedEnumType("xAxisIndex", typeof(MultiIndex)), "brush", "dataZoom"); + AddMappedEnumType(new MappedEnumType("yAxisIndex", typeof(MultiIndex)), "brush", "dataZoom"); + + + + AddMappedEnumType(new MappedEnumType("layout", typeof(TreeLayout)), "TreeSeries"); + AddMappedEnumType(new MappedEnumType("edgeShape", typeof(TreeEdgeShape)), "TreeSeries"); + + AddMappedEnumType(new MappedEnumType("funnelAlign", typeof(FunnelAlign)), "FunnelSeries"); + AddMappedEnumType(new MappedEnumType("sort", typeof(FunnelSortOrder)), "FunnelSeries"); + + AddMappedEnumType(new MappedEnumType("nodeAlign", typeof(SankeyNodeAlign)), "SankeySeries"); + + AddMappedEnumType(new MappedEnumType("layout", typeof(GraphLayout)), "GraphSeries"); + + AddMappedEnumType(new MappedEnumType("nodeClick", typeof(SunburstNodeClick)), "SunburstSeries"); + AddMappedEnumType(new MappedEnumType("sort", typeof(SortOrder)), "SunburstSeries"); + + AddMappedEnumType(new MappedEnumType("symbolRepeatDirection", typeof(StartOrEnd)), "PictorialBarSeries", "PictorialBarSeriesData"); + AddMappedEnumType(new MappedEnumType("symbolPosition", typeof(StartOrEndOrCenter)), "PictorialBarSeries", "PictorialBarSeriesData"); + AddMappedEnumType(new MappedEnumType("symbolRepeat", typeof(PictorialSymbolRepeat)), "PictorialBarSeries", "PictorialBarSeriesData"); + + AddMappedEnumType(new MappedEnumType("effectType", typeof(ScatterEffectType)), "EffectScatterSeries"); + + AddMappedEnumType(new MappedEnumType("roseType", typeof(PieRoseType)), "PieSeries"); + AddMappedEnumType(new MappedEnumType("radius", typeof(CircleRadius)), "PieSeries"); + AddMappedEnumType(new MappedEnumType("center", typeof(CircleCenter)), "PieSeries"); + + AddMappedEnumType(new MappedEnumType("filterMode", typeof(DataZoomFilterMode)), "InsideDataZoom", "SliderDataZoom"); + AddMappedEnumType(new MappedEnumType("zoomOnMouseWheel", typeof(DataZoomOnMouse)), "InsideDataZoom"); + AddMappedEnumType(new MappedEnumType("moveOnMouseMove", typeof(DataZoomOnMouse)), "InsideDataZoom"); + AddMappedEnumType(new MappedEnumType("moveOnMouseWheel", typeof(DataZoomOnMouse)), "InsideDataZoom"); + } + + public ObjectType ChartOptions => chartOptions; + + public IReadOnlyDictionary> TypesWithDuplicates => allObjectTypesWithDuplicates; + + public IEnumerable ListObjectTypesToGenerate() + { + yield return chartOptions; + + foreach (var objectType in objectTypeLookup.Values) + yield return objectType; + } + + public bool TryGetObjectType(string name, out ObjectType? objectType) => objectTypeLookup.TryGetValue(name, out objectType); + + public IPropertyType? MapArrayType(ObjectType parent, OptionProperty optProp, JsonProperty prop) + { + // FIRST: Check for special cases that should override ItemType determination + // These must come before ItemType processing to ensure they take priority + // Note: Use parent.DotNetType (not parent.Name which is empty for root) + switch (prop.Name, parent.DotNetType) + { + case ("series", "ChartOptions"): + // Use typed list of ISeries for type safety instead of List + return new GenericListType(new SimpleType("ISeries")); + case ("dataZoom", "ChartOptions"): + // Use typed list of IDataZoom for type safety instead of List + return new GenericListType(new SimpleType("IDataZoom")); + case ("visualMap", "ChartOptions"): + // Allow single visualMap object or array of visual maps + return new SingleOrArrayType("IVisualMap"); + case ("dimensions", "Dataset"): + case ("dimensions", _) when parent.DotNetType.EndsWith("Series"): + // Use string array (full union type support planned for future) + return new SimpleType("string[]"); + case ("text", "ContinuousVisualMap"): + case ("text", "PiecewiseVisualMap"): + // Use string array for text labels + return new SimpleType("string[]"); + case ("nodes", "SankeySeries"): + return new GenericListType(new SimpleType("SankeySeriesData")); + case ("edges", "SankeySeries"): + return new GenericListType(new SimpleType("SankeySeriesLink")); + case ("nodes", "GraphSeries"): + return new GenericListType(new SimpleType("GraphSeriesData")); + case ("edges", "GraphSeries"): + return new GenericListType(new SimpleType("GraphSeriesLink")); + } + + // did we succeed in determining the item type ? + if (optProp.ItemType != null) + { + // For series data properties, use object? for maximum flexibility + // ECharts data can be arrays, objects, JavascriptFunction, or dataset references + if (prop.Name == "data" && parent.Name.EndsWith("Series")) + { + return new SimpleType("object"); + } + + // Use DataList for axis/legend data properties that need string array support + if (prop.Name == "data") + { + string parentName = parent.Name; + // Check for axis types (note: parent.Name is lowercase from JSON) + if (parentName == "xAxis" || parentName == "yAxis" || parentName == "angleAxis" || + parentName == "radiusAxis" || parentName == "parallelAxis" || parentName == "parallelAxisDefault" || + parentName == "singleAxis") + { + return new DataListType(optProp.ItemType); + } + // Check for legend + if (parentName == "legend") + { + return new DataListType(optProp.ItemType); + } + } + + return new GenericListType(optProp.ItemType); + } + + // no ItemType, fallback to List with warning + //Console.WriteLine($"WARNING: array type '{prop.Name}' in '{parent.Name}' will be mapped to List"); + return new ObjectListType() + { + TypeWarning = $"array type '{prop.Name}' in '{parent.Name}' will be mapped to List" + }; + } + + public bool TryGetMappedEnumType(string name, string parentName, out MappedEnumType? mappedEnumType) + { + if (enumTypesMappedByName.TryGetValue(name, out var typeDict)) + { + // specific mapping for the parent type + if (typeDict.TryGetValue(parentName, out mappedEnumType)) + return true; + + // non-specific mapping for the parent type + if (typeDict.TryGetValue("*", out mappedEnumType)) + return true; + + //TODO: sanity check for enum types + } + + mappedEnumType = null; + return false; + } + + public void TrackType(ObjectType objectType) + { + if (!allObjectTypesWithDuplicates.TryGetValue(objectType.Name, out var list)) + { + list = new List(); + allObjectTypesWithDuplicates.Add(objectType.Name, list); + } + + list.Add(objectType); + } + + public ObjectType MergeType(ObjectType objectType) + { + if (!objectTypeLookup.TryGetValue(objectType.Name, out var mergedType)) + { + mergedType = new ObjectType(null, objectType.Name, typeGroup: objectType.TypeGroup); // merged types have many parents, so set parent to null + objectTypeLookup.Add(mergedType.Name, mergedType); + } + + foreach (var property in objectType.Properties) + { + if (!mergedType.Properties.Any(p => p.Name == property.Name)) + { + mergedType.Properties.Add(property); + } + } + + return mergedType; + } + + public ObjectType GetOrCreateSharedType(string typeName, string typeGroup) + { + // Check if shared type already exists + if (objectTypeLookup.TryGetValue(typeName, out var existingType)) + { + return existingType; + } + + // Create new shared type for hand-coded class + var sharedType = new ObjectType(null, typeName, typeGroup: typeGroup); + sharedType.IsShared = true; // Mark as shared/hand-coded + objectTypeLookup.Add(typeName, sharedType); + + return sharedType; + } + + private void AddMappedEnumType(MappedEnumType mappedType, params string[]? specificObjectTypes) + { + if (!enumTypesMappedByName.TryGetValue(mappedType.Name, out var typeDict)) + { + typeDict = new Dictionary(); + enumTypesMappedByName.Add(mappedType.Name, typeDict); + } + + if (specificObjectTypes == null || specificObjectTypes.Length == 0) + { + typeDict.Add("*", mappedType); + } + else + { + foreach (var specificType in specificObjectTypes) + { + typeDict.Add(specificType, mappedType); + } + } + } +} diff --git a/src/Vizor.ECharts.BindingGenerator/Types/TypePatternRegistry.cs b/src/Vizor.ECharts.BindingGenerator/Types/TypePatternRegistry.cs new file mode 100644 index 00000000..d0388f6a --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/Types/TypePatternRegistry.cs @@ -0,0 +1,227 @@ +namespace Vizor.ECharts.BindingGenerator.Types; + +/// +/// Central registry of type mapping patterns. +/// Provides a single source of truth for what type combinations are supported, +/// partially supported, or unsupported by the generator. +/// +internal class TypePatternRegistry +{ + private readonly TypeCollection typeCollection; + + /// + /// Primitive types that map directly to simple C# types + /// + private static readonly Dictionary PrimitiveTypes = new() + { + { "string", "string" }, + { "number", "double" }, + { "boolean", "bool" }, + { "object", "object" }, + }; + + /// + /// Fully supported 2-3 element union types (custom types with implicit conversions) + /// Format: "type1,type2" → typeof(CustomType) + /// + private static readonly Dictionary SupportedPatterns = new() + { + { "boolean,number", typeof(NumberOrBool) }, + { "boolean,string", typeof(BoolOrString) }, + { "number,string", typeof(NumberOrString) }, + { "array,number", typeof(NumberOrNumberArray) }, + { "function,string", typeof(StringOrFunction) }, + { "function,number", typeof(NumberOrFunction) }, + { "function,object", typeof(ObjectOrFunction) }, + { "color,function", typeof(ColorOrFunction) }, + { "array,color", typeof(ColorArray) }, + { "array,number,string", typeof(NumberOrStringArray) }, + { "array,function,number", typeof(NumberArrayOrFunction) }, + { "function,number,string", typeof(NumberOrStringOrFunction) }, + // Vector types (new in ECharts 5.6.0) - all represent array of 2 elements + { "array,vector", typeof(NumberOrNumberArray) }, // can be array or 2-element vector + { "array,percentvector", typeof(NumberOrNumberArray) }, // can be array or 2-element percentvector + { "array,number,vector", typeof(NumberOrNumberArray) }, // number or array or vector + // Icon types - Icon class handles both IconType enum and string URLs + { "icon,string", typeof(Icon) }, // icon type or string URL + { "function,icon,string", typeof(StringOrFunction) }, // function or icon or string (treat as StringOrFunction) + // Graph autoCurveness - boolean|number|array + { "array,boolean,number", typeof(AutoCurveness) }, // bool OR number OR array (GraphSeries.autoCurveness) + // StringArray - string or array of strings (general pattern, but some properties override this with specific types) + { "array,string", typeof(StringArray) }, // string OR string[] (e.g., symbol, seriesKey) + // Rotation mode - boolean (auto-rotate), number (degrees), or string (like 'tangential') + { "boolean,number,string", typeof(RotationMode) }, // label.rotate in bar series + // DataZoom values - date string, number (timestamp), or percentage string + { "date,number,string", typeof(DateOrNumberOrString) }, // DataZoom start/end/min/max + }; + + /// + /// Patterns that need typed accessor generation (object? property with getters/setters) + /// These patterns are too complex for a single union type but have a clear two-part solution + /// + private static readonly HashSet PartiallySupportedPatterns = new() + { + "enum,function", // e.g., FunnelSeries.sort - can be enum OR function + }; + + /// + /// Patterns that are too ambiguous or complex for automation + /// Keep as object? with documentation; use typed accessor pattern if needed + /// + private static readonly HashSet TrulyUnsupportedPatterns = new() + { + "*,number", // itemGap - genuinely ambiguous + "array,object", // dataset.source - array or object data source + "array,percentvector", // offsetCenter, center (can be array or 2-element percentvector) + "array,string", // symbol, position, etc. (can be array or string) + "boolean,object", // emptyCircleStyle - boolean or object + "color,number", // borderColorSaturation - color or saturation number (property-specific) + "date,number,object,string", // Too many variations + "date,object,number,string", // Too many variations (different order) + "function,htmlelement,string", // appendTo - function or HTMLElement or string selector + "number,percentvector,string", // symbolMargin - number OR array OR string (too complex) + "prefix", // timeline.label.rotate - unknown ECharts type (fallback to string) + }; + + + public TypePatternRegistry(TypeCollection typeCollection) + { + this.typeCollection = typeCollection; + } + + /// + /// Try to get a mapped type for a list of type specifications + /// + /// List of type names from option.json (e.g., ["enum", "number"]) + /// Parent type context for enum resolution + /// Output: the mapped C# type, or null if not found + /// True if a mapping was found + public bool TryGetMappedType( + List types, + string parentName, + out IPropertyType? mappedType) + { + mappedType = null; + + if (types == null || types.Count == 0) + return false; + + // Single type - check primitives and special types + if (types.Count == 1) + { + var type = types[0]; + + if (PrimitiveTypes.TryGetValue(type, out var primitiveType)) + { + mappedType = new SimpleType(primitiveType); + return true; + } + + // Special cases + if (type == "color") + { + mappedType = new MappedCustomType(typeof(Color)); + return true; + } + + if (type == "function") + { + mappedType = new MappedCustomType(typeof(JavascriptFunction)); + return true; + } + + // Enum is handled separately + return false; + } + + // Multi-type pattern - check supported unions + if (types.Count >= 2) + { + var key = string.Join(",", types.OrderBy(t => t)); + + if (SupportedPatterns.TryGetValue(key, out var customType)) + { + mappedType = new MappedCustomType(customType); + return true; + } + } + + return false; + } + + /// + /// Check if a pattern is partially supported (needs typed accessor pattern) + /// + public bool IsPartiallySupported(List types) + { + if (types == null || types.Count == 0) + return false; + + var key = string.Join(",", types.OrderBy(t => t)); + return PartiallySupportedPatterns.Contains(key); + } + + /// + /// Check if a pattern is known to be too complex for automation + /// + public bool IsTrulyUnsupported(List types, out string reason) + { + reason = string.Empty; + + if (types == null || types.Count == 0) + return false; + + var key = string.Join(",", types.OrderBy(t => t)); + + if (TrulyUnsupportedPatterns.Contains(key)) + { + reason = $"Pattern '{key}' is too ambiguous for strong typing. Use typed accessor pattern with object?."; + return true; + } + + return false; + } + + /// + /// Get all supported pattern keys for documentation purposes + /// + public IEnumerable GetAllSupportedPatternKeys() + { + return SupportedPatterns.Keys.Concat(PartiallySupportedPatterns); + } + + /// + /// Generate a suggestion for mapping an unknown pattern + /// + public string? GenerateSuggestion(List types, string? enumValues = null) + { + if (types == null || types.Count == 0) + return null; + + var typeStr = string.Join(",", types.OrderBy(t => t)); + + // For single unmapped enum, suggest enum mapping + if (types.Count == 1 && types[0] == "enum" && enumValues != null) + { + return $"Add enum type mapping: AddMappedEnumType(new MappedEnumType(\"{{propName}}\", typeof(???)), \"{{parentName}}\");"; + } + + // For 2-element unions, suggest creating custom type + if (types.Count == 2 && !types.Contains("*")) + { + var name = string.Join("Or", types.OrderBy(t => t).Select(t => Capitalize(t))); + return $"Create custom union type: {name} (see NumberOrString pattern for template)"; + } + + // For 3+ elements, suggest investigation + if (types.Count >= 3) + { + return $"Pattern '{typeStr}' is complex - investigate if typed accessor pattern is appropriate"; + } + + return null; + } + + private static string Capitalize(string s) => + s.Length > 0 ? char.ToUpper(s[0]) + s.Substring(1) : s; +} diff --git a/src/Vizor.ECharts.BindingGenerator/Vizor.ECharts.BindingGenerator.csproj b/src/Vizor.ECharts.BindingGenerator/Vizor.ECharts.BindingGenerator.csproj index 32463e64..eb04f92f 100644 --- a/src/Vizor.ECharts.BindingGenerator/Vizor.ECharts.BindingGenerator.csproj +++ b/src/Vizor.ECharts.BindingGenerator/Vizor.ECharts.BindingGenerator.csproj @@ -2,11 +2,15 @@ Exe - net7.0 + net10.0 enable enable + + + + diff --git a/src/Vizor.ECharts.BindingGenerator/echart-options/5.6.0/option.json b/src/Vizor.ECharts.BindingGenerator/echart-options/5.6.0/option.json new file mode 100644 index 00000000..c4b74c8b --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/echart-options/5.6.0/option.json @@ -0,0 +1 @@ +{"$schema":"https://echarts.apache.org/doc/json-schema","option":{"type":"Object","properties":{"title":{"type":["Object"],"description":"

Title component, including main title and subtitle.

\n

In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.

\n

Here are some instances of different animation easing functions, among which every instance has a title component:

\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the title from showing

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"text":{"type":["string"],"description":"\n\n

The main title text, supporting for \\n for newlines.

\n","uiControl":{"type":"text"},"default":"''"},"link":{"type":["string"],"description":"

The hyper link of main title text.

\n","default":"''"},"target":{"type":["string"],"description":"

Open the hyper link of main title in specified tab.

\n

options:

\n
    \n

  • 'self' opening it in current tab

    \n
    • \n

  • 'blank' opening it in a new tab

    \n
    • \n
\n","default":"'blank'"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

main title text color.

\n","uiControl":{"type":"color","default":"'#333'"},"default":"'#333'"},"fontStyle":{"type":["string"],"description":"\n\n

main title font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

main title font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'bolder'"},"fontFamily":{"type":["string"],"description":"\n\n

main title font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

main title font size.

\n","uiControl":{"type":"number","default":"18","min":"1","step":"1"},"default":18},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"subtext":{"type":["string"],"description":"\n\n

Subtitle text, supporting for \\n for newlines.

\n","uiControl":{"type":"text"},"default":"''"},"sublink":{"type":["string"],"description":"

The hyper link of subtitle text.

\n","default":"''"},"subtarget":{"type":["string"],"description":"

Open the hyper link of subtitle in specified tab, options:

\n
    \n

  • 'self' opening it in current tab

    \n
    • \n

  • 'blank' opening it in a new tab

    \n
    • \n
\n","default":"'blank'"},"subtextStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

subtitle text color.

\n","uiControl":{"type":"color","default":"'#aaa'"},"default":"'#aaa'"},"fontStyle":{"type":["string"],"description":"\n\n

subtitle font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

subtitle font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

subtitle font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

subtitle font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"textAlign":{"type":["string"],"description":"\n\n

The horizontal align of the component (including "text" and "subtext").

\n

Optional values: 'auto', 'left', 'right', 'center'.

\n","uiControl":{"type":"enum","options":"auto,left,center,right","default":"auto"},"default":"'auto'"},"textVerticalAlign":{"type":["string"],"description":"\n\n

The vertical align of the component (including "text" and "subtext").

\n

Optional values: 'auto', 'top', 'bottom', 'middle'.

\n","uiControl":{"type":"enum","options":"auto,top,middle,bottom","default":"auto"},"default":"'auto'"},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events

\n","default":false},"padding":{"type":["number","Array"],"description":"\n\n

title space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"itemGap":{"type":["number"],"description":"\n\n

The gap between the main title and subtitle.

\n","uiControl":{"type":"number","min":"0","default":"10","step":"1"},"default":10},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between title component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between title component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between title component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between title component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"backgroundColor":{"type":["Color"],"description":"\n\n

Background color of title, which is transparent by default.

\n
\n

Color can be represented in RGB, for example 'rgb(128, 128, 128)'. RGBA can be used when you need alpha channel, for example 'rgba(128, 128, 128, 0.5)'. You may also use hexadecimal format, for example '#ccc'.

\n
\n","uiControl":{"type":"color"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of title. Support the same color format as backgroundColor.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"\n\n

Border width of title.

\n","uiControl":{"type":"number","default":"0","min":"0","step":"0.5"},"default":1},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n

Attention: This property works only if show: true is configured and backgroundColor is defined other than transparent.

\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"legend":{"type":["Object"],"description":"

Legend component.

\n

Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.

\n

In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.

\n

If there have to be too many legend items, vertically scrollable legend or horizontally scrollable legend are options to paginate them. Check legend.type please.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Type of legend. Optional values:

\n
    \n
  • 'plain': Simple legend. (default)
    • \n
  • 'scroll': Scrollable legend. It helps when too many legend items needed to be shown.
    • \n
\n

See vertically scrollable legend or horizontally scrollable legend.

\n

When 'scroll' used, these options below can be used for detailed configuration:

\n\n","uiControl":{"type":"enum","options":"plain,scroll"}},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n\n\n\n\n\n\n","uiControl":{"type":"boolean","default":"true"},"default":true},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between legend component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between legend component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between legend component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between legend component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"width":{"type":["string","number"],"description":"

Width of legend component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of legend component. Adaptive by default.

\n","default":"'auto'"},"orient":{"type":["string"],"description":"\n\n

The layout orientation of legend.

\n

Options:

\n
    \n
  • 'horizontal'
    • \n
  • 'vertical'
    • \n
\n","uiControl":{"type":"enum","options":"vertical,horizontal","default":"horizontal"},"default":"'horizontal'"},"align":{"type":["string"],"description":"\n\n

Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When left value of this component is 'right', and the vertical layout (orient is 'vertical'), it would be aligned to 'right'.

\n

Option:

\n
    \n
  • 'auto'
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
\n","uiControl":{"type":"enum","options":"auto,left,right","default":"auto"},"default":"'auto'"},"padding":{"type":["number","Array"],"description":"\n\n\n\n\n\n

legend space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"itemGap":{"type":["number"],"description":"\n\n

The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.

\n","uiControl":{"type":"number","default":"10","min":"0","step":"0.5"},"default":10},"itemWidth":{"type":["number"],"description":"\n\n

Image width of legend symbol.

\n","uiControl":{"type":"number","default":"25","min":"0","step":"0.5"},"default":25},"itemHeight":{"type":["number"],"description":"\n\n

Image height of legend symbol.

\n","uiControl":{"type":"number","default":"14","min":"0","step":"0.5"},"default":14},"itemStyle":{"type":["Object"],"description":"

Legend item style. If its children have values as 'inherit', the values are inherited from corresponding series options.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"inherit"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"inherit"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

When its value is "auto", if there is borderWidth in series, then it is set to be 2, otherwise, it is set to be 0. If its value is "inherit", then the borderWidth of the series are always used

\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"},"default":"auto"},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"inherit"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":"inherit"},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"inherit"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"inherit"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":"inherit"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"0","min":"0","step":"0.5"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"null"},"default":null},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"},"default":"inherit"},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","default":"inherit","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"lineStyle":{"type":["Object"],"description":"

Legend line style. If its children have values as 'inherit', the values are inherited from corresponding series options.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"inherit"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"},"default":"auto"},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"inherit"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":"inherit"},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"inherit"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"inherit"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":"inherit"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"inherit","min":"0","step":"0.5"},"default":"inherit"},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"},"default":"inherit"},"inactiveColor":{"type":["Color"],"description":"

Legend line stroke color when not selected.

\n","default":"'#ccc'"},"inactiveWidth":{"type":["number"],"description":"

Legend line stroke width when not selected.

\n","default":2}}},"symbolRotate":{"type":["number","string"],"description":"

Rotation of the symbol, which can be number | 'inherit'. If it's 'inherit', symbolRotate of the series will be used.

\n","default":"'inherit'"},"formatter":{"type":["string","Function"],"description":"

Formatter is used to format label of legend, which supports string template and callback function.

\n

Example:

\n
// using string template, the template variable is legend name {name}\nformatter: 'Legend {name}'\n// using callback function\nformatter: function (name) {\n    return 'Legend ' + name;\n}\n
\n","default":null},"selectedMode":{"type":["string","boolean"],"description":"\n\n

Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be false to disable it.

\n

Besides, it can be set to 'single' or 'multiple', for single selection and multiple selection.

\n","uiControl":{"type":"boolean","options":"true,false,single,multiple"},"default":true},"inactiveColor":{"type":["Color"],"description":"

Legend color when not selected.

\n","default":"'#ccc'"},"inactiveBorderColor":{"type":["Color"],"description":"

Legend border color when not selected.

\n","default":"'#ccc'"},"inactiveBorderWidth":{"type":["number","string"],"description":"

Legend border width when not selected.

\n

If it is 'auto', the border width is set to be 2 if there is border width in the series, 0 elsewise.

\n

If it is 'inherit', it always takes the border width of the series.

\n","default":"'auto'"},"selected":{"type":["Object"],"description":"

State table of selected legend.

\n

example:

\n
selected: {\n    // selected'series 1'\n    'series 1': true,\n    // unselected'series 2'\n    'series 2': false\n}\n
"},"textStyle":{"type":["Object"],"description":"

Legend text style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"#333"},"default":"#333"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"tooltip":{"type":["Object"],"description":"

Tooltip configuration for legend tooltip, which is similar to tooltip.

\n"},"icon":{"type":["string"],"description":"\n\n

Icon of the legend items.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"data":{"type":["Array"],"description":"

Data array of legend. An array item is usually a name representing string. (If it is a pie chart, it could also be the name of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string '' (null string) or '\\n' (new line string) can be used for a new line.

\n

If data is not specified, it will be auto collected from series. For most of series, it will be collected from series.name or the dimension name specified by seriesName of series.encode. For some types of series like pie and funnel, it will be collected from the name field of series.data.

\n

If you need to set the style for a single item, you may also set the configuration of it. In this case, name attribute is used to represent name of series.

\n

Example:

\n
data: [{\n    name: 'series 1',\n    // compulsorily set icon as a circle\n    icon: 'circle',\n    // set up the text in red\n    textStyle: {\n        color: 'red'\n    }\n}]\n
","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of legend, which should be the name value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.

\n"},"icon":{"type":["string"],"description":"

Icon of the legend.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"itemStyle":{"type":["Object"],"description":"

Legend Item item style. If its children have values as 'inherit', the values are inherited from corresponding series options.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"inherit"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"inherit"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

When its value is "auto", if there is borderWidth in series, then it is set to be 2, otherwise, it is set to be 0. If its value is "inherit", then the borderWidth of the series are always used

\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"},"default":"auto"},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"inherit"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":"inherit"},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"inherit"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"inherit"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":"inherit"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"0","min":"0","step":"0.5"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"null"},"default":null},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"},"default":"inherit"},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","default":"inherit","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"lineStyle":{"type":["Object"],"description":"

Legend Item line style. If its children have values as 'inherit', the values are inherited from corresponding series options.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"inherit"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"},"default":"auto"},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"inherit"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":"inherit"},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"inherit"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"inherit"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":"inherit"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"inherit","min":"0","step":"0.5"},"default":"inherit"},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"},"default":"inherit"},"inactiveColor":{"type":["Color"],"description":"

Legend line stroke color when not selected.

\n","default":"'#ccc'"},"inactiveWidth":{"type":["number"],"description":"

Legend line stroke width when not selected.

\n","default":2}}},"inactiveColor":{"type":["Color"],"description":"

Legend color when not selected.

\n","default":"'#ccc'"},"inactiveBorderColor":{"type":["Color"],"description":"

Legend border color when not selected.

\n","default":"'#ccc'"},"inactiveBorderWidth":{"type":["number","string"],"description":"

Legend border width when not selected.

\n

If it is 'auto', the border width is set to be 2 if there is border width in the series, 0 elsewise.

\n

If it is 'inherit', it always takes the border width of the series.

\n","default":"'auto'"},"symbolRotate":{"type":["number","string"],"description":"

Rotation of the symbol, which can be number | 'inherit'. If it's 'inherit', symbolRotate of the series will be used.

\n","default":"'inherit'"},"textStyle":{"type":["Object"],"description":"

Text style of legend.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}}}}},"backgroundColor":{"type":["Color"],"description":"\n\n

Background color of legend, which is transparent by default.

\n
\n

Color can be represented in RGB, for example 'rgb(128, 128, 128)'. RGBA can be used when you need alpha channel, for example 'rgba(128, 128, 128, 0.5)'. You may also use hexadecimal format, for example '#ccc'.

\n
\n","uiControl":{"type":"color"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of legend. Support the same color format as backgroundColor.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"\n\n

Border width of legend.

\n","uiControl":{"type":"number","default":"1","min":"0","step":"0.5"},"default":1},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n

Attention: This property works only if show: true is configured and backgroundColor is defined other than transparent.

\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"scrollDataIndex":{"type":["number"],"description":"

It works when legend.type is 'scroll'.

\n

dataIndex of the left top most displayed item.

\n

Although the scrolling of legend items can be controlled by calling setOption and specifying this property, we suggest that do not control legend in this way unless necessary (setOption might be time-consuming), but just use action legendScroll to do that.

\n

See vertically scrollable legend or horizontally scrollable legend.

\n","default":0},"pageButtonItemGap":{"type":["number"],"description":"

It works when legend.type is 'scroll'.

\n

The gap between page buttons and page info text.

\n

See vertically scrollable legend or horizontally scrollable legend.

\n","default":5},"pageButtonGap":{"type":["number"],"description":"

It works when legend.type is 'scroll'.

\n

The gap between page buttons and legend items.

\n

See vertically scrollable legend or horizontally scrollable legend.

\n","default":null},"pageButtonPosition":{"type":["string"],"description":"

It works when legend.type is 'scroll'.

\n

The position of page buttons and page info. Optional values:

\n
    \n
  • 'start': on the left or top.
    • \n
  • 'end': on the right or bottom.
    • \n
\n

See vertically scrollable legend or horizontally scrollable legend.

\n","default":"'end'"},"pageFormatter":{"type":["string","Function"],"description":"

It works when legend.type is 'scroll'.

\n

Page info formatter. It is '{current}/{total}' by default, where {current} is current page number (start from 1), and {total} is the total page number.

\n

If pageFormatter is a function, it should return a string. The parameters is:

\n
{\n    current: number\n    total: number\n}\n
\n

See vertically scrollable legend or horizontally scrollable legend.

\n","default":"'{current}/{total}'"},"pageIcons":{"type":["Object"],"description":"

It works when legend.type is 'scroll'.

\n

The icons of page buttons.

\n","properties":{"horizontal":{"type":["Array"],"description":"

The icons of page buttons when legend.orient is 'horizontal'.

\n

It should be an array, [previous page button, next page button], ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'] by default.

\n

For the each item of the array,

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See vertically scrollable legend or horizontally scrollable legend.

\n"},"vertical":{"type":["Array"],"description":"

The icons of page buttons when legend.orient is 'vertical'.

\n

It should be an array, [previous page button, next page button], ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z'] by default.

\n

For the each item of the array,

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See vertically scrollable legend or horizontally scrollable legend.

\n"}}},"pageIconColor":{"type":["string"],"description":"\n\n

It works when legend.type is 'scroll'.

\n

The color of page buttons.

\n

See vertically scrollable legend or horizontally scrollable legend.

\n","uiControl":{"type":"color","default":"#2f4554"},"default":"'#2f4554'"},"pageIconInactiveColor":{"type":["string"],"description":"\n\n

It works when legend.type is 'scroll'.

\n

The color of page buttons when they are inactive.

\n

See vertically scrollable legend or horizontally scrollable legend.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"'#aaa'"},"pageIconSize":{"type":["number","Array"],"description":"\n\n

It works when legend.type is 'scroll'.

\n

The size of page buttons. It can be a number, or an array, like [10, 3], represents [width, height].

\n

See vertically scrollable legend or horizontally scrollable legend.

\n","uiControl":{"type":"vector","default":"15,15","dims":"w,h"},"default":15},"pageTextStyle":{"type":["Object"],"description":"

It works when legend.type is 'scroll'.

\n

The text style of page info.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"#333"},"default":"#333"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to use animation when page scrolls.

\n","uiControl":{"type":"boolean","default":"true"}},"animationDurationUpdate":{"type":["number"],"description":"\n\n

Duration of the page scroll animation.

\n","uiControl":{"type":"number","min":"0","default":"800","step":"20"},"default":800},"emphasis":{"type":["Object"],"description":"","properties":{"selectorLabel":{"type":["Object"],"description":"
\n

Since v4.4.0

\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"selector":{"type":["boolean","Array"],"description":"
\n

Since v4.4.0

\n
\n

The selector button in the legend component. Currently, there are two types of button:

\n
    \n
  • all: Select All
    • \n
  • inverse: Inverse Selection
    • \n
\n

The selector button doesn't display by default, you need to enable it manually as follows.

\n
selector: [\n    {\n        type: 'all',\n        // can be any title you like\n        title: 'All'\n    },\n    {\n        type: 'inverse',\n        // can be any title you like\n        title: 'Inv'\n    }\n]\n\n// or\nselector: true\n\n// or\nselector: ['all', 'inverse']\n
\n","default":false},"selectorLabel":{"type":["Object"],"description":"
\n

Since v4.4.0

\n
\n

The text label style of the selector button, which is displayed by default.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"selectorPosition":{"type":["string"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are 'end' and 'start'. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.

\n","uiControl":{"type":"enum","options":"auto,start,end"},"default":"'auto'"},"selectorItemGap":{"type":["number"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

The gap between the selector button.

\n","uiControl":{"type":"number","min":"0","default":"7","step":"0.5"},"default":7},"selectorButtonGap":{"type":["number"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

The gap between selector button and legend component.

\n","uiControl":{"type":"number","min":"0","default":"10","step":"0.5"},"default":10}}},"grid":{"type":["Object"],"description":"

Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. Line chart, bar chart, and scatter chart (bubble chart) can be drawn in grid.

\n

In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.

\n

Following is an example of Anscombe Quartet:

\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

Whether to show the grid in rectangular coordinate.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between grid component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'10%'"},"top":{"type":["string","number"],"description":"

Distance between grid component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":60},"right":{"type":["string","number"],"description":"

Distance between grid component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"'10%'"},"bottom":{"type":["string","number"],"description":"

Distance between grid component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":60},"width":{"type":["string","number"],"description":"

Width of grid component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of grid component. Adaptive by default.

\n","default":"'auto'"},"containLabel":{"type":["boolean"],"description":"\n\n

Whether the grid region contains axis tick label of axis.

\n
    \n
  • When containLabel is false:
      \n
    • grid.left grid.right grid.top grid.bottom grid.width grid.height decide the location and size of the rectangle that is made of by xAxis and yAxis.
      • \n
    • Setting to false will help when multiple grids need to be aligned at their axes.
      • \n
    \n
    • \n
  • When containLabel is true:
      \n
    • grid.left grid.right grid.top grid.bottom grid.width grid.height decide the location and size of the rectangle that contains the axes and the labels of the axes.
      • \n
    • Setting to true will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.
      • \n
    \n
    • \n
\n","uiControl":{"type":"boolean","default":"false"},"default":false},"backgroundColor":{"type":["Color"],"description":"\n\n

Background color of grid, which is transparent by default.

\n
\n

Color can be represented in RGB, for example 'rgb(128, 128, 128)'. RGBA can be used when you need alpha channel, for example 'rgba(128, 128, 128, 0.5)'. You may also use hexadecimal format, for example '#ccc'.

\n
\n

Attention: Works only if show: true is set.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of grid. Support the same color format as backgroundColor.

\n

Attention: Works only if show: true is set.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"\n\n

Border width of grid.

\n

Attention: Works only if show: true is set.

\n","uiControl":{"type":"number","default":"1","min":"0","step":"0.5"},"default":1},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n

Attention: This property works only if show: true is configured and backgroundColor is defined other than transparent.

\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n

Attention: This property works only if show: true configured.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"tooltip":{"type":["Object"],"description":"

tooltip settings in the coordinate system component.

\n

General Introduction:

\n

tooltip can be configured on different places:

\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip component.

\n

including tooltip floating layer and axisPointer.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"trigger":{"type":["string"],"description":"\n\n

Type of triggering.

\n

Options:

\n
    \n

  • 'item'

    \n

    Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.

    \n
    • \n

  • 'axis'

    \n

    Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.

    \n

    ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in grid or polar. Also, you may assign axis with axisPointer.axis.

    \n
    • \n

  • 'none'

    \n

    Trigger nothing.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"item,axis,none","default":"item"},"default":"'item'"},"axisPointer":{"type":["Object"],"description":"

Configuration item for axisPointer.

\n

tooltip.axisPointer is like syntactic sugar of axisPointer settings on axes (for example, xAxis.axisPointer or angleAxis.axisPointer). More detailed features can be configured on someAxis.axisPointer. But in common cases, using tooltip.axisPointer is more convenient.

\n
\n

Notice: configurations of tooltip.axisPointer has lower priority than that of someAxis.axisPointer.

\n
\n
\n

axisPointer is a tool for displaying reference line and axis value under mouse pointer.

\n

For example:

\n\n\n\n

In the demo above, axisPointer.link is used to link axisPointer from different coordinate systems.

\n

axisPointer can also be used on touch device, where user can drag the button to move the reference line and label.

\n\n\n\n

In the cases that more than one axis exist, axisPointer helps to look inside the data.

\n\n\n\n\n\n\n
\n
\n

Notice:\nGenerally, axisPointers is configured in each axes who need them (for example xAxis.axisPointer), or configured in tooltip (for example tooltip.axisPointer).

\n
\n
\n

But these configurations can only be configured in global axisPointer:\naxisPointer.triggerOn, axisPointer.link.

\n
\n
\n
\n

How to display axisPointer:

\n

In cartesian (grid) and polar](~polar) and (single axis, each axis has its own axisPointer.

\n

Those axisPointer will not be displayed by default, utill configured as follows:

\n
    \n

  • Set someAxis.axisPointer.show (like xAxis.axisPointer.show) as true. Then axisPointer of this axis will be displayed.

    \n
    • \n

  • Set tooltip.trigger as 'axis', or set tooltip.axisPointer.type as 'cross'. Then coordinate system will automatically chose the axes who will display their axisPointers. (tooltip.axisPointer.axis can be used to change the choice.) Notice, axis.axisPointer will override tooltip.axisPointer settings.

    \n
    • \n
\n
\n

How to display the label of axisPointer:

\n

The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:

\n\n
\n

How to configure axisPointer on touch device:

\n

Set someAxis.axisPointer.handle.show (for example xAxis.axisPointer.handle.show as true. Then the button for dragging will be displayed. (This feature is not supported on polar).

\n

Notice:\nIf tooltip does not work well in this case, try to settooltip.triggerOn as 'none' (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set tooltip.alwaysShowContent as true (then tooltip will always be displayed).

\n

See the example.

\n
\n

Snap to point

\n

In value axis and time axis, if snap is set as true, axisPointer will snap to point automatically.

\n
\n","properties":{"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n

  • 'cross' crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"none,line,shadow,cross","default":"line"},"default":"'line'"},"axis":{"type":["string"],"description":"

The coordinate axis, which could be 'x', 'y', 'radius', or 'angle'. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).

\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"crossStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'cross'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"dashed"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":200},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},"xAxis":{"type":["Object"],"description":"

The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. offset can be used to avoid overlap when you need to put more than two x axis.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"gridIndex":{"type":["number"],"description":"

The index of grid which the x axis belongs to. Defaults to be in the first grid.

\n","default":0},"alignTicks":{"type":["boolean"],"description":"
\n

Since v5.3.0

\n
\n

alignTicks turned on to automatically align ticks when multiple numeric x axes. Only available for axes of type 'value' and 'log'.

\n","default":false},"position":{"type":["string"],"description":"\n\n

The position of x axis.

\n

options:

\n
    \n
  • 'top'
    • \n
  • 'bottom'
    • \n
\n

The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.
Notice: Set xAxis.axisLine.onZero to false to activate this option.

\n","uiControl":{"type":"enum","options":"top,bottom","default":"bottom"}},"offset":{"type":["number"],"description":"\n\n

Offset of x axis relative to default position. Useful when multiple x axis has same position value.
Notice: Set xAxis.axisLine.onZero to false to activate this option.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via xAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"'category'"},"name":{"type":["string"],"description":"\n\n

Name of axis.

\n","uiControl":{"type":"text"}},"nameLocation":{"type":["string"],"description":"\n\n

Location of axis name.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'middle' or 'center'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,middle,end","default":"end"},"default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"

Text style of axis name.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Color of axis name uses axisLine.lineStyle.color by default.

\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

axis name font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

axis name font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

axis name font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

axis name font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Gap between axis name and axis line.

\n","uiControl":{"type":"number","step":"0.5","default":"15"},"default":15},"nameRotate":{"type":["number"],"description":"\n\n

Rotation of axis name.

\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"},"default":null},"nameTruncate":{"type":["Object"],"description":"

Truncation of the axis name.

\n","properties":{"maxWidth":{"type":["number"],"description":"

The maximum length for the truncated text. Any text exceeding this length will be truncated.

\n"},"ellipsis":{"type":["string"],"description":"

The content displayed at the end of the text after truncation.

\n","default":"'...'"}}},"inverse":{"type":["boolean"],"description":"\n\n

Set this to true to invert the axis.\nThis is a new option available from Echarts 3 and newer.

\n","uiControl":{"type":"boolean"},"default":false},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n
\n

The value axis doesn't show the axis line by default since v5.0.0, you need to explicitly set axisLine.show as true to enable it.

\n
\n","uiControl":{"type":"boolean","default":"true"},"default":true},"onZero":{"type":["boolean"],"description":"\n\n

Specifies whether X or Y axis lies on the other's origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"onZeroAxisIndex":{"type":["number"],"description":"

When multiple axes exists, this option can be used to specify which axis can be "onZero" to.

\n"},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n
\n

The value axis doesn't show the axis ticks by default since v5.0.0, you need to explicitly set axisTick.show as true to enable it.

\n
\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"alignMinLabel":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

Alignment of the label of the min tick. If set to be null, it's the same with other labels .

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
  • null (default)
    • \n
\n","default":null},"alignMaxLabel":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

Alignment of the label of the max tick. If set to be null, it's the same with other labels. See align.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
  • null (default)
    • \n
\n","default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"splitLine":{"type":["Object"],"description":"

Split line of axis in grid area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing.\nvalue type axes are shown by default, while category type axes are hidden.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showMinLine":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the min tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"showMaxLabel":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the max tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitLine, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"\n\n

The color of the splitLine, which could be set separately.

\n

SplitLine color could also be set in color array, which the split lines would take as their colors in turns.

\n

Example:

\n
splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: ['#aaa', '#ddd']\n    }\n}\n
","uiControl":{"type":"color"},"default":"['#ccc']"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"minorSplitLine":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Minor split lines of axis in the grid area。It will align to the minorTick

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor split lines.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

minorSplitLineLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#eee'"},"width":{"type":["number"],"description":"\n\n

minorSplitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitArea":{"type":["Object"],"description":"

Split area of axis in grid area, not shown by default.

\n","properties":{"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitArea, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"show":{"type":["boolean"],"description":"\n\n

Set this to true to show the splitArea.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"areaStyle":{"type":["Object"],"description":"

Split area style.

\n","properties":{"color":{"type":["Array"],"description":"

Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.

\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"

axisPointer settings on the axis.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

axisPointer will not be displayed by default. But if tooltip.trigger is set as 'axis' or tooltip.axisPointer.type is set as 'cross', axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. tooltip.axisPointer.axis can be used to change the choice.

\n","uiControl":{"type":"boolean"},"default":false},"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"line,shadow,none"},"default":"'line'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"triggerEmphasis":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.4.3

\n
\n

Whether to trigger emphasis of series.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerTooltip":{"type":["boolean"],"description":"\n\n

Whether to trigger tooltip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"value":{"type":["number"],"description":"

current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer.

\n","default":null},"status":{"type":["boolean"],"description":"\n\n

Current status, can be 'show' or 'hide'.

\n","uiControl":{"type":"enum","options":"show,hide"}},"handle":{"type":["Object"],"description":"

A button used to drag axisPointer. This feature is applicable in touch device. See example.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set to true to use handle.

\n","uiControl":{"type":"boolean"},"default":false},"icon":{"type":["*"],"description":"\n\n

The icon of the handle.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See the example of using image

\n","uiControl":{"type":"icon","clean":"true"}},"size":{"type":["number","Array"],"description":"\n\n

The size of the handle, which can be set as a single value or an array ([width, height]).

\n","uiControl":{"type":"vector","default":"45,45","min":"0","step":"0.5","dims":"width,height"},"default":45},"margin":{"type":["number"],"description":"\n\n

Distance from handle center to axis.

\n","uiControl":{"type":"number","default":"50","min":"0","step":"0.5"},"default":50},"color":{"type":["string"],"description":"\n\n

The color of the handle.

\n","uiControl":{"type":"color"},"default":"'#333'"},"throttle":{"type":["number"],"description":"\n\n

Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.

\n","uiControl":{"type":"number","default":"40","min":"0","step":"10"},"default":40},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"2","step":"0.5"},"default":2},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

The tooltip configuration for xAxis, must set triggerEvent as true and enable global option.tooltip component.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip. Defaults to false.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in x axis.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in x axis, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":0}}},"yAxis":{"type":["Object"],"description":"

The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. offset can be used to avoid overlap when you need to put more than two y axis.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"gridIndex":{"type":["number"],"description":"

The index of grid which the y axis belongs to. Defaults to be in the first grid.

\n","default":0},"alignTicks":{"type":["boolean"],"description":"
\n

Since v5.3.0

\n
\n

alignTicks turned on to automatically align ticks when multiple numeric y axes. Only available for axes of type 'value' and 'log'.

\n","default":false},"position":{"type":["string"],"description":"\n\n

the position of y axis.

\n

options:

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
\n

The first y axis in grid defaults to be the left ('left') of the grid, and the second y axis is on the other side against the first y axis.
Notice: Set yAxis.axisLine.onZero to false to activate this option.

\n","uiControl":{"type":"enum","options":"left,right","default":"left"}},"offset":{"type":["number"],"description":"\n\n

Offset of y axis relative to default position. Useful when multiple y axis has same position value.\nNotice: Set yAxis.axisLine.onZero to false to activate this option.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via yAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"'value'"},"name":{"type":["string"],"description":"\n\n

Name of axis.

\n","uiControl":{"type":"text"}},"nameLocation":{"type":["string"],"description":"\n\n

Location of axis name.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'middle' or 'center'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,middle,end","default":"end"},"default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"

Text style of axis name.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Color of axis name uses axisLine.lineStyle.color by default.

\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

axis name font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

axis name font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

axis name font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

axis name font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Gap between axis name and axis line.

\n","uiControl":{"type":"number","step":"0.5","default":"15"},"default":15},"nameRotate":{"type":["number"],"description":"\n\n

Rotation of axis name.

\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"},"default":null},"nameTruncate":{"type":["Object"],"description":"

Truncation of the axis name.

\n","properties":{"maxWidth":{"type":["number"],"description":"

The maximum length for the truncated text. Any text exceeding this length will be truncated.

\n"},"ellipsis":{"type":["string"],"description":"

The content displayed at the end of the text after truncation.

\n","default":"'...'"}}},"inverse":{"type":["boolean"],"description":"\n\n

Set this to true to invert the axis.\nThis is a new option available from Echarts 3 and newer.

\n","uiControl":{"type":"boolean"},"default":false},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n
\n

The value axis doesn't show the axis line by default since v5.0.0, you need to explicitly set axisLine.show as true to enable it.

\n
\n","uiControl":{"type":"boolean","default":"true"},"default":true},"onZero":{"type":["boolean"],"description":"\n\n

Specifies whether X or Y axis lies on the other's origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"onZeroAxisIndex":{"type":["number"],"description":"

When multiple axes exists, this option can be used to specify which axis can be "onZero" to.

\n"},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n
\n

The value axis doesn't show the axis ticks by default since v5.0.0, you need to explicitly set axisTick.show as true to enable it.

\n
\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"verticalAlignMinLabel":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

Vertical alignment of the label of the min tick. If set to be null, it's the same with other labels. See verticalAlign.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
  • null (default)
    • \n
\n","default":null},"verticalAlignMaxLabel":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

Vertical alignment of the label of the max tick. If set to be null, it's the same with other labels. See verticalAlign.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
  • null (default)
    • \n
\n","default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"splitLine":{"type":["Object"],"description":"

Split line of axis in grid area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing.\nvalue type axes are shown by default, while category type axes are hidden.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showMinLine":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the min tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"showMaxLabel":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the max tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitLine, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"\n\n

The color of the splitLine, which could be set separately.

\n

SplitLine color could also be set in color array, which the split lines would take as their colors in turns.

\n

Example:

\n
splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: ['#aaa', '#ddd']\n    }\n}\n
","uiControl":{"type":"color"},"default":"['#ccc']"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"minorSplitLine":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Minor split lines of axis in the grid area。It will align to the minorTick

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor split lines.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

minorSplitLineLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#eee'"},"width":{"type":["number"],"description":"\n\n

minorSplitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitArea":{"type":["Object"],"description":"

Split area of axis in grid area, not shown by default.

\n","properties":{"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitArea, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"show":{"type":["boolean"],"description":"\n\n

Set this to true to show the splitArea.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"areaStyle":{"type":["Object"],"description":"

Split area style.

\n","properties":{"color":{"type":["Array"],"description":"

Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.

\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"

axisPointer settings on the axis.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

axisPointer will not be displayed by default. But if tooltip.trigger is set as 'axis' or tooltip.axisPointer.type is set as 'cross', axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. tooltip.axisPointer.axis can be used to change the choice.

\n","uiControl":{"type":"boolean"},"default":false},"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"line,shadow,none"},"default":"'line'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"triggerEmphasis":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.4.3

\n
\n

Whether to trigger emphasis of series.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerTooltip":{"type":["boolean"],"description":"\n\n

Whether to trigger tooltip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"value":{"type":["number"],"description":"

current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer.

\n","default":null},"status":{"type":["boolean"],"description":"\n\n

Current status, can be 'show' or 'hide'.

\n","uiControl":{"type":"enum","options":"show,hide"}},"handle":{"type":["Object"],"description":"

A button used to drag axisPointer. This feature is applicable in touch device. See example.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set to true to use handle.

\n","uiControl":{"type":"boolean"},"default":false},"icon":{"type":["*"],"description":"\n\n

The icon of the handle.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See the example of using image

\n","uiControl":{"type":"icon","clean":"true"}},"size":{"type":["number","Array"],"description":"\n\n

The size of the handle, which can be set as a single value or an array ([width, height]).

\n","uiControl":{"type":"vector","default":"45,45","min":"0","step":"0.5","dims":"width,height"},"default":45},"margin":{"type":["number"],"description":"\n\n

Distance from handle center to axis.

\n","uiControl":{"type":"number","default":"50","min":"0","step":"0.5"},"default":50},"color":{"type":["string"],"description":"\n\n

The color of the handle.

\n","uiControl":{"type":"color"},"default":"'#333'"},"throttle":{"type":["number"],"description":"\n\n

Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.

\n","uiControl":{"type":"number","default":"40","min":"0","step":"10"},"default":40},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"2","step":"0.5"},"default":2},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

The tooltip configuration for yAxis, must set triggerEvent as true and enable global option.tooltip component.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip. Defaults to false.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in y axis.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in y axis, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":0}}},"polar":{"type":["Object"],"description":"

Polar coordinate can be used in scatter and line chart. Every polar coordinate has an angleAxis and a radiusAxis.

\n

For example:

\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"center":{"type":["Array"],"description":"\n\n

Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.

\n

Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.

\n

Example:

\n
// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n
","uiControl":{"type":"percentvector","dims":"x,y"},"default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"\n\n

Radius of Polar coordinate. Value can be:

\n
    \n
  • number: Specify outside radius directly.
    • \n
  • string: For example, '20%', means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).
    • \n
\n
    \n
  • Array.<number|string>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.
    • \n
\n","uiControl":{"type":"percentvector","dims":"inner,outer","default":"0%, 75%"}},"tooltip":{"type":["Object"],"description":"

tooltip settings in the coordinate system component.

\n

General Introduction:

\n

tooltip can be configured on different places:

\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip component.

\n

including tooltip floating layer and axisPointer.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"trigger":{"type":["string"],"description":"\n\n

Type of triggering.

\n

Options:

\n
    \n

  • 'item'

    \n

    Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.

    \n
    • \n

  • 'axis'

    \n

    Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.

    \n

    ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in grid or polar. Also, you may assign axis with axisPointer.axis.

    \n
    • \n

  • 'none'

    \n

    Trigger nothing.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"item,axis,none","default":"item"},"default":"'item'"},"axisPointer":{"type":["Object"],"description":"

Configuration item for axisPointer.

\n

tooltip.axisPointer is like syntactic sugar of axisPointer settings on axes (for example, xAxis.axisPointer or angleAxis.axisPointer). More detailed features can be configured on someAxis.axisPointer. But in common cases, using tooltip.axisPointer is more convenient.

\n
\n

Notice: configurations of tooltip.axisPointer has lower priority than that of someAxis.axisPointer.

\n
\n
\n

axisPointer is a tool for displaying reference line and axis value under mouse pointer.

\n

For example:

\n\n\n\n

In the demo above, axisPointer.link is used to link axisPointer from different coordinate systems.

\n

axisPointer can also be used on touch device, where user can drag the button to move the reference line and label.

\n\n\n\n

In the cases that more than one axis exist, axisPointer helps to look inside the data.

\n\n\n\n\n\n\n
\n
\n

Notice:\nGenerally, axisPointers is configured in each axes who need them (for example xAxis.axisPointer), or configured in tooltip (for example tooltip.axisPointer).

\n
\n
\n

But these configurations can only be configured in global axisPointer:\naxisPointer.triggerOn, axisPointer.link.

\n
\n
\n
\n

How to display axisPointer:

\n

In cartesian (grid) and polar](~polar) and (single axis, each axis has its own axisPointer.

\n

Those axisPointer will not be displayed by default, utill configured as follows:

\n
    \n

  • Set someAxis.axisPointer.show (like xAxis.axisPointer.show) as true. Then axisPointer of this axis will be displayed.

    \n
    • \n

  • Set tooltip.trigger as 'axis', or set tooltip.axisPointer.type as 'cross'. Then coordinate system will automatically chose the axes who will display their axisPointers. (tooltip.axisPointer.axis can be used to change the choice.) Notice, axis.axisPointer will override tooltip.axisPointer settings.

    \n
    • \n
\n
\n

How to display the label of axisPointer:

\n

The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:

\n\n
\n

How to configure axisPointer on touch device:

\n

Set someAxis.axisPointer.handle.show (for example xAxis.axisPointer.handle.show as true. Then the button for dragging will be displayed. (This feature is not supported on polar).

\n

Notice:\nIf tooltip does not work well in this case, try to settooltip.triggerOn as 'none' (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set tooltip.alwaysShowContent as true (then tooltip will always be displayed).

\n

See the example.

\n
\n

Snap to point

\n

In value axis and time axis, if snap is set as true, axisPointer will snap to point automatically.

\n
\n","properties":{"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n

  • 'cross' crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"none,line,shadow,cross","default":"line"},"default":"'line'"},"axis":{"type":["string"],"description":"

The coordinate axis, which could be 'x', 'y', 'radius', or 'angle'. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).

\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"crossStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'cross'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"dashed"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":200},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},"radiusAxis":{"type":["Object"],"description":"

Radial axis of polar coordinate.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"polarIndex":{"type":["number"],"description":"

Index of radial axis in polor coordinate. It's the first axis by default.

\n","default":0},"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via radiusAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"'value'"},"name":{"type":["string"],"description":"\n\n

Name of axis.

\n","uiControl":{"type":"text"}},"nameLocation":{"type":["string"],"description":"\n\n

Location of axis name.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'middle' or 'center'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,middle,end","default":"end"},"default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"

Text style of axis name.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Color of axis name uses axisLine.lineStyle.color by default.

\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

axis name font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

axis name font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

axis name font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

axis name font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Gap between axis name and axis line.

\n","uiControl":{"type":"number","step":"0.5","default":"15"},"default":15},"nameRotate":{"type":["number"],"description":"\n\n

Rotation of axis name.

\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"},"default":null},"nameTruncate":{"type":["Object"],"description":"

Truncation of the axis name.

\n","properties":{"maxWidth":{"type":["number"],"description":"

The maximum length for the truncated text. Any text exceeding this length will be truncated.

\n"},"ellipsis":{"type":["string"],"description":"

The content displayed at the end of the text after truncation.

\n","default":"'...'"}}},"inverse":{"type":["boolean"],"description":"\n\n

Set this to true to invert the axis.\nThis is a new option available from Echarts 3 and newer.

\n","uiControl":{"type":"boolean"},"default":false},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"splitLine":{"type":["Object"],"description":"

Split line of axis in grid area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing.\nvalue type axes are shown by default, while category type axes are hidden.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showMinLine":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the min tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"showMaxLabel":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the max tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitLine, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"\n\n

The color of the splitLine, which could be set separately.

\n

SplitLine color could also be set in color array, which the split lines would take as their colors in turns.

\n

Example:

\n
splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: ['#aaa', '#ddd']\n    }\n}\n
","uiControl":{"type":"color"},"default":"['#ccc']"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"minorSplitLine":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Minor split lines of axis in the grid area。It will align to the minorTick

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor split lines.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

minorSplitLineLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#eee'"},"width":{"type":["number"],"description":"\n\n

minorSplitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitArea":{"type":["Object"],"description":"

Split area of axis in grid area, not shown by default.

\n","properties":{"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitArea, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"show":{"type":["boolean"],"description":"\n\n

Set this to true to show the splitArea.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"areaStyle":{"type":["Object"],"description":"

Split area style.

\n","properties":{"color":{"type":["Array"],"description":"

Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.

\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"

axisPointer settings on the axis.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

axisPointer will not be displayed by default. But if tooltip.trigger is set as 'axis' or tooltip.axisPointer.type is set as 'cross', axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. tooltip.axisPointer.axis can be used to change the choice.

\n","uiControl":{"type":"boolean"},"default":false},"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"line,shadow,none"},"default":"'line'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"triggerEmphasis":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.4.3

\n
\n

Whether to trigger emphasis of series.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerTooltip":{"type":["boolean"],"description":"\n\n

Whether to trigger tooltip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"value":{"type":["number"],"description":"

current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer.

\n","default":null},"status":{"type":["boolean"],"description":"\n\n

Current status, can be 'show' or 'hide'.

\n","uiControl":{"type":"enum","options":"show,hide"}},"handle":{"type":["Object"],"description":"

A button used to drag axisPointer. This feature is applicable in touch device. See example.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set to true to use handle.

\n","uiControl":{"type":"boolean"},"default":false},"icon":{"type":["*"],"description":"\n\n

The icon of the handle.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See the example of using image

\n","uiControl":{"type":"icon","clean":"true"}},"size":{"type":["number","Array"],"description":"\n\n

The size of the handle, which can be set as a single value or an array ([width, height]).

\n","uiControl":{"type":"vector","default":"45,45","min":"0","step":"0.5","dims":"width,height"},"default":45},"margin":{"type":["number"],"description":"\n\n

Distance from handle center to axis.

\n","uiControl":{"type":"number","default":"50","min":"0","step":"0.5"},"default":50},"color":{"type":["string"],"description":"\n\n

The color of the handle.

\n","uiControl":{"type":"color"},"default":"'#333'"},"throttle":{"type":["number"],"description":"\n\n

Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.

\n","uiControl":{"type":"number","default":"40","min":"0","step":"10"},"default":40},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"2","step":"0.5"},"default":2},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

The tooltip configuration for radiusAxis, must set triggerEvent as true and enable global option.tooltip component.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip. Defaults to false.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Radial axis.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Radial axis, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":0}}},"angleAxis":{"type":["Object"],"description":"

The angle axis in Polar Coordinate.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"polarIndex":{"type":["number"],"description":"

The index of angle axis in Polar Coordinate. The first axis is used by default.

\n","default":0},"startAngle":{"type":["number"],"description":"\n\n

Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.

\n

The following shows an example with startAngle of 45 deg.

\n\n\n","uiControl":{"type":"angle","default":"90","min":"-360","max":"360","step":"1"},"default":90},"endAngle":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.0

\n
\n

Ending angle of axis. null by default, standing for a whole circle.

\n

The following shows an example with endAngle of -180 deg.

\n\n\n","uiControl":{"type":"angle","default":"null","min":"-360","max":"360","step":"1"},"default":null},"clockwise":{"type":["boolean"],"description":"\n\n

Whether the positive position of axis is clockwise. True for clockwise by default.

\n

The following shows an example with clockwise as false.

\n\n\n\n\n","uiControl":{"type":"boolean","default":"true"},"default":true},"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via angleAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"'category'"},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"splitLine":{"type":["Object"],"description":"

Split line of axis in grid area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing.\nvalue type axes are shown by default, while category type axes are hidden.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showMinLine":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the min tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"showMaxLabel":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the max tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitLine, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"\n\n

The color of the splitLine, which could be set separately.

\n

SplitLine color could also be set in color array, which the split lines would take as their colors in turns.

\n

Example:

\n
splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: ['#aaa', '#ddd']\n    }\n}\n
","uiControl":{"type":"color"},"default":"['#ccc']"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"minorSplitLine":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Minor split lines of axis in the grid area。It will align to the minorTick

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor split lines.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

minorSplitLineLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#eee'"},"width":{"type":["number"],"description":"\n\n

minorSplitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitArea":{"type":["Object"],"description":"

Split area of axis in grid area, not shown by default.

\n","properties":{"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitArea, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"show":{"type":["boolean"],"description":"\n\n

Set this to true to show the splitArea.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"areaStyle":{"type":["Object"],"description":"

Split area style.

\n","properties":{"color":{"type":["Array"],"description":"

Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.

\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"

axisPointer settings on the axis.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

axisPointer will not be displayed by default. But if tooltip.trigger is set as 'axis' or tooltip.axisPointer.type is set as 'cross', axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. tooltip.axisPointer.axis can be used to change the choice.

\n","uiControl":{"type":"boolean"},"default":false},"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"line,shadow,none"},"default":"'line'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"triggerEmphasis":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.4.3

\n
\n

Whether to trigger emphasis of series.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerTooltip":{"type":["boolean"],"description":"\n\n

Whether to trigger tooltip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"value":{"type":["number"],"description":"

current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer.

\n","default":null},"status":{"type":["boolean"],"description":"\n\n

Current status, can be 'show' or 'hide'.

\n","uiControl":{"type":"enum","options":"show,hide"}},"handle":{"type":["Object"],"description":"

A button used to drag axisPointer. This feature is applicable in touch device. See example.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set to true to use handle.

\n","uiControl":{"type":"boolean"},"default":false},"icon":{"type":["*"],"description":"\n\n

The icon of the handle.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See the example of using image

\n","uiControl":{"type":"icon","clean":"true"}},"size":{"type":["number","Array"],"description":"\n\n

The size of the handle, which can be set as a single value or an array ([width, height]).

\n","uiControl":{"type":"vector","default":"45,45","min":"0","step":"0.5","dims":"width,height"},"default":45},"margin":{"type":["number"],"description":"\n\n

Distance from handle center to axis.

\n","uiControl":{"type":"number","default":"50","min":"0","step":"0.5"},"default":50},"color":{"type":["string"],"description":"\n\n

The color of the handle.

\n","uiControl":{"type":"color"},"default":"'#333'"},"throttle":{"type":["number"],"description":"\n\n

Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.

\n","uiControl":{"type":"number","default":"40","min":"0","step":"10"},"default":40},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"2","step":"0.5"},"default":2},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

The tooltip configuration for angleAxis, must set triggerEvent as true and enable global option.tooltip component.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip. Defaults to false.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Angle Axis.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":0}}},"radar":{"type":["Object"],"description":"

Coordinate for radar charts. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.

\n

Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including name, axisLine, axisTick, axisLabel, splitLine, splitArea.

\n

Here is a custom example of radar component.

\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"center":{"type":["Array"],"description":"\n\n

Center position of , the first of which is the horizontal position, and the second is the vertical position.

\n

Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.

\n

Example:

\n
// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n
","uiControl":{"type":"percentvector","dims":"x,y"},"default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"\n\n

Radius of . Value can be:

\n
    \n
  • number: Specify outside radius directly.
    • \n
  • string: For example, '20%', means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).
    • \n
\n
    \n
  • Array.<number|string>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.
    • \n
\n","uiControl":{"type":"percentvector","dims":"inner,outer","default":"0%, 75%"},"default":"75%"},"startAngle":{"type":["number"],"description":"

The start angle of coordinate, which is the angle of the first indicator axis.

\n","default":90},"axisName":{"type":["Object"],"description":"

Name options for radar indicators.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to display the indicator's name.

\n","default":true},"formatter":{"type":["string","Function"],"description":"

The formatter of indicator's name, in which the string and callback function are supported. See the following example:

\n
// using string template, the template variable should be the indicator's name {value}\nformatter: '【{value}】'\n// using callback function, the first parameter is the indicator's name, and the second parameter id the indicator's configuration item\nformatter: function (value, indicator) {\n    return '【' + value + '】';\n}\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#333'"},"default":"'#333'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Distance between the indicator's name and axis.

\n","uiControl":{"type":"number","default":"15","step":"1"},"default":15},"splitNumber":{"type":["number"],"description":"\n\n

Segments of indicator axis.

\n","uiControl":{"type":"number","default":"15","step":"1"},"default":5},"shape":{"type":["string"],"description":"\n\n

Radar render type, in which 'polygon' and 'circle' are supported.

\n","uiControl":{"type":"enum","options":"polygon,circle"},"default":"'polygon'"},"scale":{"type":["boolean"],"description":"\n\n

Whether to prevent calculating the scaling relative to zero. If it is set to be true, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.

\n","uiControl":{"type":"boolean"},"default":false},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"splitLine":{"type":["Object"],"description":"

Split line of axis in grid area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing.\nvalue type axes are shown by default, while category type axes are hidden.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showMinLine":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the min tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"showMaxLabel":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the max tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"\n\n

The color of the splitLine, which could be set separately.

\n

SplitLine color could also be set in color array, which the split lines would take as their colors in turns.

\n

Example:

\n
splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: ['#aaa', '#ddd']\n    }\n}\n
","uiControl":{"type":"color"},"default":"['#ccc']"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitArea":{"type":["Object"],"description":"

Split area of axis in grid area, not shown by default.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to true to show the splitArea.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"areaStyle":{"type":["Object"],"description":"

Split area style.

\n","properties":{"color":{"type":["Array"],"description":"

Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.

\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"indicator":{"type":["Array"],"description":"

Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.

\n
indicator: [\n   { name: 'Sales (sales) ', max: 6500},\n   { name: 'Administration (Administration) ', max: 16000, color: 'red'}, // Set the indicator as 'red'\n   { name: 'Information Technology (Information Technology) ', max: 30000},\n   { name: 'Customer Support (Customer Support) ', max: 38000},\n   { name: 'Development (Development) ', max: 52000},\n   { name: 'Marketing (Marketing) ', max: 25000}\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Indicator's name.

\n"},"max":{"type":["number"],"description":"\n\n

The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.

\n","uiControl":{"type":"number","default":"100","step":"1"}},"min":{"type":["number"],"description":"\n\n

The minimum value of indicator. It it an optional configuration, with default value of 0.

\n","uiControl":{"type":"number","step":"1"}},"color":{"type":["string"],"description":"\n\n

Specify a color of the indicator.

\n","uiControl":{"type":"color"}}}}}}},"dataZoom":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"

dataZoomInside

\n

Data zoom component of inside type.

\n

Refer to dataZoom for more information.

\n

The inside means it's inside the coordinates.

\n
    \n
  • Translation: data area can be translated when moving in coordinates.
    • \n
  • Scaling:
      \n
    • PC: when mouse rolls (similar with touch pad) in coordinates.
      • \n
    • Mobile: when touches and moved with two fingers in coordinates on touch screens.
      • \n
    \n
    • \n
\n


\n

\n","properties":{"type":{"type":["string"],"description":"","default":"'inside'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"disabled":{"type":["boolean"],"description":"\n\n

Whether disable inside zoom.

\n","uiControl":{"type":"boolean"},"default":false},"xAxisIndex":{"type":["number","Array"],"description":"

Specify which xAxis is/are controlled by the dataZoom-inside when catesian coordinate system is used.

\n

By default the first xAxis that parallel to dataZoom are controlled when dataZoom-inside.orient is set as 'horizontal'. But it is recommended to specify it explicitly but not use default value.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n
\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"

Specify which yAxis is/are controlled by the dataZoom-inside when catesian coordinate system is used.

\n

By default the first yAxis that parallel to dataZoom are controlled when dataZoom-inside.orient is set as 'vertical'. But it is recommended to specify it explicitly but not use default value.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n
\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"

Specify which radiusAxis is/are controlled by the dataZoom-inside when polar coordinate system is used.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n
\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"

Specify which angleAxis is/are controlled by the dataZoom-inside when polar coordinate system is used.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n
\n","default":null},"filterMode":{"type":["string"],"description":"\n\n\n\n

Generally dataZoom component zoom or roam coordinate system through data filtering and set the windows of axes internally.

\n

Its behaviours vary according to filtering mode settings (dataZoom.filterMode).

\n

Possible values:

\n
    \n

  • 'filter': data that outside the window will be filtered, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.

    \n
    • \n

  • 'weakFilter': data that outside the window will be filtered, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.

    \n
    • \n

  • 'empty': data that outside the window will be set to NaN, which will not lead to changes of windows of other axes.

    \n
    • \n

  • 'none': Do not filter data.

    \n
    • \n
\n

How to set filterMode is up to users, depending on the requirements and scenarios. Expirically:

\n
    \n

  • If only xAxis or only yAxis is controlled by dataZoom, filterMode: 'filter' is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.

    \n
    • \n

  • If both xAxis and yAxis are operated by dataZoom:

    \n
      \n

    • If xAxis and yAxis should not effect mutually (e.g. a scatter chart with both axes on the type of 'value'), they should be set to be filterMode: 'empty'.

      \n
      • \n

    • If xAxis is the main axis and yAxis is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging dataZoomX to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging dataZoomY to change the window of yAxis, we need the xAxis not to be changed), in this case, xAxis should be set to be filterMode: 'filter', while yAxis should be set to be filterMode: 'empty'.

      \n
      • \n
    \n
    • \n
\n

It can be demonstrated by the sample:

\n
option = {\n    dataZoom: [\n        {\n            id: 'dataZoomX',\n            type: 'slider',\n            xAxisIndex: [0],\n            filterMode: 'filter'\n        },\n        {\n            id: 'dataZoomY',\n            type: 'slider',\n            yAxisIndex: [0],\n            filterMode: 'empty'\n        }\n    ],\n    xAxis: {type: 'value'},\n    yAxis: {type: 'value'},\n    series{\n        type: 'bar',\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n
\n

In the sample above, dataZoomX is set as filterMode: 'filter'. When use drags dataZoomX (do not touch dataZoomY) and the valueWindow of xAxis is changed to [2, 50] consequently, dataZoomX travel the first column of series.data and filter items that out of the window. The series.data turns out to be:

\n
[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n
\n

Before filtering, the second column, which corresponds to yAxis, has values 24, 80, 9, 11. After filtering, only 24 and 9 are left. Then the extent of yAxis is adjusted to adapt the two values (if yAxis.min and yAxis.max are not set).

\n

So filterMode: 'filter' can be used to enable the other axis to auto adapt the filtered data.

\n

Then let's review the sample from the beginning, dataZoomY is set as filterMode: 'empty'. So if user drags dataZoomY (do not touch dataZoomX) and its window is changed to [10, 60] consequently, dataZoomY travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:

\n
[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n
\n

In this case, the first column (i.e., 12, 90, 3, 1, which corresponds to xAxis), will not be changed at all. So dragging yAxis will not change extent of xAxis, which is good for requirements like outlier filtering.

\n

See this example:

\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"filter,weakFilter,empty,none","default":"filter"},"default":"'filter'"},"start":{"type":["number"],"description":"\n\n

The start percentage of the window out of the data extent, in the range of 0 ~ 100.

\n

dataZoom-inside.start and dataZoom-inside.end define the window of the data in percent form.

\n

More info about the relationship between dataZoom-inside.start and axis extent can be checked in dataZoom-inside.rangeMode.

\n","uiControl":{"type":"number","min":"0","max":"100","step":"0.5"},"default":0},"end":{"type":["number"],"description":"\n\n

The end percentage of the window out of the data extent, in the range of 0 ~ 100.

\n

dataZoom-inside.start and dataZoom-inside.end define the window of the data in percent form.

\n

More info about the relationship between dataZoom-inside.end and axis extent can be checked in dataZoom-inside.rangeMode.

\n","uiControl":{"type":"number","min":"0","max":"100","default":"100","step":"0.5"},"default":100},"startValue":{"type":["number","string","Date"],"description":"

The start absolute value of the window, not works when dataZoom-inside.start is set.

\n

dataZoom-inside.startValue and dataZoom-inside.endValue define the window of the data window in absolute value form.

\n

Notice, if an axis is set to be category, startValue could be set as index of the array of axis.data or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.

\n

More info about the relationship between dataZoom-inside.startValue and axis extent can be checked in dataZoom-inside.rangeMode.

\n","default":null},"endValue":{"type":["number","string","Date"],"description":"

The end absolute value of the window, doesn't work when dataZoom-inside.end is set.

\n

dataZoom-inside.startValue and dataZoom-inside.endValue define the window of the data window in absolute value form.

\n

Notice, if an axis is set to be category, startValue could be set as index of the array of axis.data or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.

\n

More info about the relationship between dataZoom-inside.endValue and axis extent can be checked in dataZoom-inside.rangeMode.

\n","default":null},"minSpan":{"type":["number"],"description":"\n\n

Used to restrict minimal window size, in percent, which value is in the range of [0, 100].

\n

If dataZoom-inside.minValueSpan is set, minSpan does not work any more.

\n","uiControl":{"type":"number","min":"0","max":"100","step":"0.5"},"default":null},"maxSpan":{"type":["number"],"description":"\n\n

Used to restrict maximal window size, in percent, which value is in the range of [0, 100].

\n

If dataZoom-inside.maxValueSpan is set, maxSpan does not work any more.

\n","uiControl":{"type":"number","min":"0","max":"100","step":"0.5"},"default":null},"minValueSpan":{"type":["number","string","Date"],"description":"

Used to restrict minimal window size.

\n

For example:\nIn time axis it can be set as 3600 * 24 * 1000 * 5 to represent "5 day".\nIn category axis it can be set as 5 to represent 5 categories.

\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"

Used to restrict maximal window size.

\n

For example:\nIn time axis it can be set as 3600 * 24 * 1000 * 5 to represent "5 day".\nIn category axis it can be set as 5 to represent 5 categories.

\n","default":null},"orient":{"type":["string"],"description":"\n\n

Specify whether the layout of dataZoom component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.

\n

Valid values:

\n
    \n

  • 'horizontal': horizontal.

    \n
    • \n

  • 'vertical': vertical.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"horizontal,vertical"},"default":null},"zoomLock":{"type":["boolean"],"description":"\n\n

Specify whether to lock the size of window (selected area).

\n

When set as true, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is available but zoom is not.

\n","uiControl":{"type":"boolean"},"default":false},"throttle":{"type":["number"],"description":"\n\n

Specify the frame rate of views refreshing, with unit millisecond (ms).

\n

If animation set as true and animationDurationUpdate set as bigger than 0, you can keep throttle as the default value 100 (or set it as a value bigger than 0), otherwise it might be not smooth when dragging.

\n

If animation set as false or animationDurationUpdate set as 0, and data size is not very large, and it seems to be not smooth when dragging, you can set throttle as 0 to improve that.

\n","uiControl":{"type":"number","default":"100","min":"0","step":"20"},"default":100},"rangeMode":{"type":["Array"],"description":"

The format is [rangeModeForStart, rangeModeForEnd].

\n

For example rangeMode: ['value', 'percent'] means that use absolute value in start and percent value in end.

\n

Optional value for each item: 'value', 'percent'.

\n
    \n
  • 'value' mode: the axis extent will always only be determined by dataZoom.startValue and dataZoom.endValue, despite how data like and how axis.min and axis.max are.
    • \n
  • 'percent' mode: 100 represents 100% of the [dMin, dMax], where dMin is axis.min if axis.min specified, otherwise data.extent[0], and dMax is axis.max if axis.max specified, otherwise data.extent[1]. Axis extent will only be determined by the result of the percent of [dMin, dMax].
    • \n
\n

rangeMode are auto determined by whether option.start/option.end are specified (represents 'percent' mode) or option.startValue/option.endValue specified (represents 'value' mode). And when user behavior trigger the changing of the view, the rangeMode would be modified automatically. For example, if triggered by toolbox.dataZoom, it will be modefied to 'value', and if triggered by dataZoom-inside or dataZoom-slider, it will be modified to 'percent'.

\n

If we specify rangeMode manually in option, it only works when both start and startValue specified or both end and endValue specified. So usually we do not need to specify dataZoom.rangeMode manually.

\n

Take a scenario as an example. When we are using dynamic data (update data periodically via setOption), if in 'value' mode, the window will be kept in a fixed value range despite how data are appended, while if in 'percent' mode, whe window range will be changed alone with the appended data (suppose axis.min and axis.max are not specified).

\n"},"zoomOnMouseWheel":{"type":["boolean","string"],"description":"\n\n

How to trigger zoom. Optional values:

\n
    \n
  • true：Mouse wheel triggers zoom.
    • \n
  • false：Mouse wheel can not triggers zoom.
    • \n
  • 'shift'：Holding shift and mouse wheel triggers zoom.
    • \n
  • 'ctrl'：Holding ctrl and mouse wheel triggers zoom.
    • \n
  • 'alt'：Holding alt and mouse wheel triggers zoom.
    • \n
\n","uiControl":{"type":"enum","options":"true,false,shift,ctrl,alt","default":"true"},"default":true},"moveOnMouseMove":{"type":["boolean","string"],"description":"\n\n

How to trigger data window move. Optional values:

\n
    \n
  • true：Mouse move triggers data window move.
    • \n
  • false：Mouse move can not triggers data window move.
    • \n
  • 'shift'：Holding shift and mouse move triggers data window move.
    • \n
  • 'ctrl'：Holding ctrl and mouse move triggers data window move.
    • \n
  • 'alt'：Holding alt and mouse move triggers data window move.
    • \n
\n","uiControl":{"type":"enum","options":"true,false,shift,ctrl,alt","default":"true"},"default":true},"moveOnMouseWheel":{"type":["boolean","string"],"description":"\n\n

How to trigger data window move. Optional values:

\n
    \n
  • true：Mouse wheel triggers data window move.
    • \n
  • false：Mouse wheel can not triggers data window move.
    • \n
  • 'shift'：Holding shift and mouse wheel triggers data window move.
    • \n
  • 'ctrl'：Holding ctrl and mouse wheel triggers data window move.
    • \n
  • 'alt'：Holding alt and mouse wheel triggers data window move.
    • \n
\n","uiControl":{"type":"enum","options":"true,false,shift,ctrl,alt","default":"true"},"default":false},"preventDefaultMouseMove":{"type":["boolean"],"description":"\n\n

Whether to prevent default behavior of mouse move event.

\n","uiControl":{"type":"boolean","default":"true"},"default":true}}},{"type":["Object"],"description":"

Slider type dataZoom component provides functions like data thumbnail, zoom, brush to select, drag to move, click to locate.

\n

The followling picture shows areas to interact.

\n

\n","properties":{"type":{"type":["string"],"description":"","default":"'slider'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

Whether to show the component. If is set to be false, it will not show, but its data filtering function still works.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"backgroundColor":{"type":["Color"],"description":"\n\n

The background color of the component.

\n","uiControl":{"type":"color","default":"rgba(47,69,84,0)"},"default":"'rgba(47,69,84,0)'"},"dataBackground":{"type":["Object"],"description":"

The style of data shadow.

\n","properties":{"lineStyle":{"type":["Object"],"description":"

Line style of data shadow

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#d2dbee"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"0.5","min":"0","step":"0.5"},"default":0.5},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"

Area style of data shadow

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#d2dbee"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.2","min":"0","max":"1","step":"0.01"},"default":0.2}}}}},"selectedDataBackground":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Styles of selected data shadow.

\n","properties":{"lineStyle":{"type":["Object"],"description":"

Line style of selected data shadow.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#8fb0f7"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"0.5","min":"0","step":"0.5"},"default":0.5},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"

Area style of selected data shadow.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#8fb0f7"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.2","min":"0","max":"1","step":"0.01"},"default":0.2}}}}},"fillerColor":{"type":["Color"],"description":"\n\n

The color to fill selected area.

\n","uiControl":{"type":"color","default":"rgba(167,183,204,0.4)"},"default":"'rgba(47,69,84,0.25)'"},"borderColor":{"type":["Color"],"description":"\n\n

The color of border.

\n","uiControl":{"type":"color","default":"#d2dbee"},"default":"'#d2dbee'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":3},"handleIcon":{"type":["string"],"description":"\n\n

Icon shape of handle, which supports path string. Its default value is:

\n
'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'\n
\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"handleSize":{"type":["number","string"],"description":"\n\n

The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it's the same as the width of dataZoom component.

\n","uiControl":{"type":"percent","min":"0","step":"1","default":"100%"},"default":"'100%'"},"handleStyle":{"type":["Object"],"description":"

Style of handle. Please refer to area-simple example.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#fff"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#ACB8D1"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"handleLabel":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

Style settings for the text near the handle.

\n","properties":{"show":{"type":["boolean"],"description":"
\n

Since v5.6.0

\n
\n

Whether to show the label.

\n","default":false}}},"moveHandleIcon":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

Icon of move handle.

\n
'M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z'\n
\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"moveHandleSize":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

Size of move handle.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"7"},"default":7},"moveHandleStyle":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Style of move handle.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#D2DBEE"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.7","min":"0","max":"1","step":"0.01"},"default":0.7}}},"labelPrecision":{"type":["number","string"],"description":"\n\n

Precision of label if in number form. By default, it is decided based on the number of data.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"labelFormatter":{"type":["string","Function"],"description":"

The formatter tool for the label.

\n
    \n

  • It is a template if in string. For instance, aaaa{value}bbbb, where {value} will be replaced by the value of actual data value.

    \n
    • \n

  • It is a callback function if in Function. For example:

    \n
    • \n
\n
/**\n * @param {*} value If axis.type is 'category', `value` is the index of axis.data.\n *                  else `value` is current value.\n * @param {strign} valueStr Inner formatted string.\n * @return {string} Returns the label formatted.\n */\nlabelFormatter: function (value, valueStr) {\n    return 'aaa' + value + 'bbb';\n}\n
\n","default":null},"showDetail":{"type":["boolean"],"description":"\n\n

Whether to show detail, that is, show the detailed data information when dragging.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showDataShadow":{"type":["string"],"description":"\n\n

Whether to show data shadow in dataZoom-silder component, to indicate the data tendency in brief.

\n","uiControl":{"type":"boolean"},"default":"'auto'"},"realtime":{"type":["boolean"],"description":"\n\n

Whether to update view while dragging. If it is set as false, the view will be updated only at the end of dragging.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

dataZoom text color.

\n","uiControl":{"type":"color","default":"#333"},"default":"#333"},"fontStyle":{"type":["string"],"description":"\n\n

dataZoom font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

dataZoom font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

dataZoom font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

dataZoom font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"xAxisIndex":{"type":["number","Array"],"description":"

Specify which xAxis is/are controlled by the dataZoom-slider when catesian coordinate system is used.

\n

By default the first xAxis that parallel to dataZoom are controlled when dataZoom-slider.orient is set as 'horizontal'. But it is recommended to specify it explicitly but not use default value.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n
\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"

Specify which yAxis is/are controlled by the dataZoom-slider when catesian coordinate system is used.

\n

By default the first yAxis that parallel to dataZoom are controlled when dataZoom-slider.orient is set as 'vertical'. But it is recommended to specify it explicitly but not use default value.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n
\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"

Specify which radiusAxis is/are controlled by the dataZoom-slider when polar coordinate system is used.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n
\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"

Specify which angleAxis is/are controlled by the dataZoom-slider when polar coordinate system is used.

\n

If it is set as a single number, one axis is controlled, while if it is set as an Array , multiple axes are controlled.

\n

For example:

\n
option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n
\n","default":null},"filterMode":{"type":["string"],"description":"\n\n\n\n

Generally dataZoom component zoom or roam coordinate system through data filtering and set the windows of axes internally.

\n

Its behaviours vary according to filtering mode settings (dataZoom.filterMode).

\n

Possible values:

\n
    \n

  • 'filter': data that outside the window will be filtered, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.

    \n
    • \n

  • 'weakFilter': data that outside the window will be filtered, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.

    \n
    • \n

  • 'empty': data that outside the window will be set to NaN, which will not lead to changes of windows of other axes.

    \n
    • \n

  • 'none': Do not filter data.

    \n
    • \n
\n

How to set filterMode is up to users, depending on the requirements and scenarios. Expirically:

\n
    \n

  • If only xAxis or only yAxis is controlled by dataZoom, filterMode: 'filter' is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.

    \n
    • \n

  • If both xAxis and yAxis are operated by dataZoom:

    \n
      \n

    • If xAxis and yAxis should not effect mutually (e.g. a scatter chart with both axes on the type of 'value'), they should be set to be filterMode: 'empty'.

      \n
      • \n

    • If xAxis is the main axis and yAxis is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging dataZoomX to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging dataZoomY to change the window of yAxis, we need the xAxis not to be changed), in this case, xAxis should be set to be filterMode: 'filter', while yAxis should be set to be filterMode: 'empty'.

      \n
      • \n
    \n
    • \n
\n

It can be demonstrated by the sample:

\n
option = {\n    dataZoom: [\n        {\n            id: 'dataZoomX',\n            type: 'slider',\n            xAxisIndex: [0],\n            filterMode: 'filter'\n        },\n        {\n            id: 'dataZoomY',\n            type: 'slider',\n            yAxisIndex: [0],\n            filterMode: 'empty'\n        }\n    ],\n    xAxis: {type: 'value'},\n    yAxis: {type: 'value'},\n    series{\n        type: 'bar',\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n
\n

In the sample above, dataZoomX is set as filterMode: 'filter'. When use drags dataZoomX (do not touch dataZoomY) and the valueWindow of xAxis is changed to [2, 50] consequently, dataZoomX travel the first column of series.data and filter items that out of the window. The series.data turns out to be:

\n
[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n
\n

Before filtering, the second column, which corresponds to yAxis, has values 24, 80, 9, 11. After filtering, only 24 and 9 are left. Then the extent of yAxis is adjusted to adapt the two values (if yAxis.min and yAxis.max are not set).

\n

So filterMode: 'filter' can be used to enable the other axis to auto adapt the filtered data.

\n

Then let's review the sample from the beginning, dataZoomY is set as filterMode: 'empty'. So if user drags dataZoomY (do not touch dataZoomX) and its window is changed to [10, 60] consequently, dataZoomY travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:

\n
[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n
\n

In this case, the first column (i.e., 12, 90, 3, 1, which corresponds to xAxis), will not be changed at all. So dragging yAxis will not change extent of xAxis, which is good for requirements like outlier filtering.

\n

See this example:

\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"filter,weakFilter,empty,none","default":"filter"},"default":"'filter'"},"start":{"type":["number"],"description":"\n\n

The start percentage of the window out of the data extent, in the range of 0 ~ 100.

\n

dataZoom-slider.start and dataZoom-slider.end define the window of the data in percent form.

\n

More info about the relationship between dataZoom-slider.start and axis extent can be checked in dataZoom-slider.rangeMode.

\n","uiControl":{"type":"number","min":"0","max":"100","step":"0.5"},"default":0},"end":{"type":["number"],"description":"\n\n

The end percentage of the window out of the data extent, in the range of 0 ~ 100.

\n

dataZoom-slider.start and dataZoom-slider.end define the window of the data in percent form.

\n

More info about the relationship between dataZoom-slider.end and axis extent can be checked in dataZoom-slider.rangeMode.

\n","uiControl":{"type":"number","min":"0","max":"100","default":"100","step":"0.5"},"default":100},"startValue":{"type":["number","string","Date"],"description":"

The start absolute value of the window, not works when dataZoom-slider.start is set.

\n

dataZoom-slider.startValue and dataZoom-slider.endValue define the window of the data window in absolute value form.

\n

Notice, if an axis is set to be category, startValue could be set as index of the array of axis.data or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.

\n

More info about the relationship between dataZoom-slider.startValue and axis extent can be checked in dataZoom-slider.rangeMode.

\n","default":null},"endValue":{"type":["number","string","Date"],"description":"

The end absolute value of the window, doesn't work when dataZoom-slider.end is set.

\n

dataZoom-slider.startValue and dataZoom-slider.endValue define the window of the data window in absolute value form.

\n

Notice, if an axis is set to be category, startValue could be set as index of the array of axis.data or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.

\n

More info about the relationship between dataZoom-slider.endValue and axis extent can be checked in dataZoom-slider.rangeMode.

\n","default":null},"minSpan":{"type":["number"],"description":"\n\n

Used to restrict minimal window size, in percent, which value is in the range of [0, 100].

\n

If dataZoom-slider.minValueSpan is set, minSpan does not work any more.

\n","uiControl":{"type":"number","min":"0","max":"100","step":"0.5"},"default":null},"maxSpan":{"type":["number"],"description":"\n\n

Used to restrict maximal window size, in percent, which value is in the range of [0, 100].

\n

If dataZoom-slider.maxValueSpan is set, maxSpan does not work any more.

\n","uiControl":{"type":"number","min":"0","max":"100","step":"0.5"},"default":null},"minValueSpan":{"type":["number","string","Date"],"description":"

Used to restrict minimal window size.

\n

For example:\nIn time axis it can be set as 3600 * 24 * 1000 * 5 to represent "5 day".\nIn category axis it can be set as 5 to represent 5 categories.

\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"

Used to restrict maximal window size.

\n

For example:\nIn time axis it can be set as 3600 * 24 * 1000 * 5 to represent "5 day".\nIn category axis it can be set as 5 to represent 5 categories.

\n","default":null},"orient":{"type":["string"],"description":"\n\n

Specify whether the layout of dataZoom component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.

\n

Valid values:

\n
    \n

  • 'horizontal': horizontal.

    \n
    • \n

  • 'vertical': vertical.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"horizontal,vertical"},"default":null},"zoomLock":{"type":["boolean"],"description":"\n\n

Specify whether to lock the size of window (selected area).

\n

When set as true, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is available but zoom is not.

\n","uiControl":{"type":"boolean"},"default":false},"throttle":{"type":["number"],"description":"\n\n

Specify the frame rate of views refreshing, with unit millisecond (ms).

\n

If animation set as true and animationDurationUpdate set as bigger than 0, you can keep throttle as the default value 100 (or set it as a value bigger than 0), otherwise it might be not smooth when dragging.

\n

If animation set as false or animationDurationUpdate set as 0, and data size is not very large, and it seems to be not smooth when dragging, you can set throttle as 0 to improve that.

\n","uiControl":{"type":"number","default":"100","min":"0","step":"20"},"default":100},"rangeMode":{"type":["Array"],"description":"

The format is [rangeModeForStart, rangeModeForEnd].

\n

For example rangeMode: ['value', 'percent'] means that use absolute value in start and percent value in end.

\n

Optional value for each item: 'value', 'percent'.

\n
    \n
  • 'value' mode: the axis extent will always only be determined by dataZoom.startValue and dataZoom.endValue, despite how data like and how axis.min and axis.max are.
    • \n
  • 'percent' mode: 100 represents 100% of the [dMin, dMax], where dMin is axis.min if axis.min specified, otherwise data.extent[0], and dMax is axis.max if axis.max specified, otherwise data.extent[1]. Axis extent will only be determined by the result of the percent of [dMin, dMax].
    • \n
\n

rangeMode are auto determined by whether option.start/option.end are specified (represents 'percent' mode) or option.startValue/option.endValue specified (represents 'value' mode). And when user behavior trigger the changing of the view, the rangeMode would be modified automatically. For example, if triggered by toolbox.dataZoom, it will be modefied to 'value', and if triggered by dataZoom-inside or dataZoom-slider, it will be modified to 'percent'.

\n

If we specify rangeMode manually in option, it only works when both start and startValue specified or both end and endValue specified. So usually we do not need to specify dataZoom.rangeMode manually.

\n

Take a scenario as an example. When we are using dynamic data (update data periodically via setOption), if in 'value' mode, the window will be kept in a fixed value range despite how data are appended, while if in 'percent' mode, whe window range will be changed alone with the appended data (suppose axis.min and axis.max are not specified).

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between dataZoom-slider component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between dataZoom-slider component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between dataZoom-slider component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between dataZoom-slider component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"width":{"type":["string","number"],"description":"\n\n

Width of dataZoom-slider component. Default to 30 when vertical, adaptive when horizontal.

\n

Has higher priority than left and right.

\n","uiControl":{"type":"number","default":"30"}},"height":{"type":["string","number"],"description":"\n\n

Height of dataZoom-slider component. Default to 30 when horizontal, adaptive when vertical.

\n

Has higher priority than top and bottom.

\n","uiControl":{"type":"number","default":"30"}},"brushSelect":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to enable brush to select.

\n","default":true},"brushStyle":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Style of brushing area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"rgba(135,175,274,0.15)"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Style when highlighted.

\n","properties":{"handleStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"handleLabel":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

Style settings for the text near the handle.

\n","properties":{"show":{"type":["boolean"],"description":"
\n

Since v5.6.0

\n
\n

Whether to show the label.

\n","default":false}}},"moveHandleStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}]},"description":"

dataZoom component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.

\n

These types of dataZoom component are supported:

\n
    \n

  • dataZoomInside: Data zoom functionalities is embedded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).

    \n
    • \n

  • dataZoomSlider: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).

    \n
    • \n

  • dataZoomSelect: A marquee tool is provided for zooming or roaming coordinate system. That is toolbox.feature.dataZoom, which can only be configured in toolbox.

    \n
    • \n
\n

Example:

\n\n\n\n


\n
\n

✦ Relationship between dataZoom and axis ✦

\n

Basically dataZoom component operates "window" on axis to zoom or roam coordinate system.

\n
\n

Use dataZoom.xAxisIndex or dataZoom.yAxisIndex or dataZoom.radiusAxisIndex or dataZoom.angleAxisIndex to specify which axes are operated by dataZoom.

\n
\n

A single chart instance can contain several dataZoom components, each of which controls different axes. The dataZoom components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).

\n


\n
\n

✦ How dataZoom components operates axes and data ✦

\n

Generally dataZoom component zoom or roam coordinate system through data filtering and set the windows of axes internally.

\n

Its behaviours vary according to filtering mode settings (dataZoom.filterMode).

\n

Possible values:

\n
    \n

  • 'filter': data that outside the window will be filtered, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.

    \n
    • \n

  • 'weakFilter': data that outside the window will be filtered, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.

    \n
    • \n

  • 'empty': data that outside the window will be set to NaN, which will not lead to changes of windows of other axes.

    \n
    • \n

  • 'none': Do not filter data.

    \n
    • \n
\n

How to set filterMode is up to users, depending on the requirements and scenarios. Expirically:

\n
    \n

  • If only xAxis or only yAxis is controlled by dataZoom, filterMode: 'filter' is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.

    \n
    • \n

  • If both xAxis and yAxis are operated by dataZoom:

    \n
      \n

    • If xAxis and yAxis should not effect mutually (e.g. a scatter chart with both axes on the type of 'value'), they should be set to be filterMode: 'empty'.

      \n
      • \n

    • If xAxis is the main axis and yAxis is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging dataZoomX to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging dataZoomY to change the window of yAxis, we need the xAxis not to be changed), in this case, xAxis should be set to be filterMode: 'filter', while yAxis should be set to be filterMode: 'empty'.

      \n
      • \n
    \n
    • \n
\n

It can be demonstrated by the sample:

\n
option = {\n    dataZoom: [\n        {\n            id: 'dataZoomX',\n            type: 'slider',\n            xAxisIndex: [0],\n            filterMode: 'filter'\n        },\n        {\n            id: 'dataZoomY',\n            type: 'slider',\n            yAxisIndex: [0],\n            filterMode: 'empty'\n        }\n    ],\n    xAxis: {type: 'value'},\n    yAxis: {type: 'value'},\n    series{\n        type: 'bar',\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n
\n

In the sample above, dataZoomX is set as filterMode: 'filter'. When use drags dataZoomX (do not touch dataZoomY) and the valueWindow of xAxis is changed to [2, 50] consequently, dataZoomX travel the first column of series.data and filter items that out of the window. The series.data turns out to be:

\n
[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n
\n

Before filtering, the second column, which corresponds to yAxis, has values 24, 80, 9, 11. After filtering, only 24 and 9 are left. Then the extent of yAxis is adjusted to adapt the two values (if yAxis.min and yAxis.max are not set).

\n

So filterMode: 'filter' can be used to enable the other axis to auto adapt the filtered data.

\n

Then let's review the sample from the beginning, dataZoomY is set as filterMode: 'empty'. So if user drags dataZoomY (do not touch dataZoomX) and its window is changed to [10, 60] consequently, dataZoomY travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:

\n
[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n
\n

In this case, the first column (i.e., 12, 90, 3, 1, which corresponds to xAxis), will not be changed at all. So dragging yAxis will not change extent of xAxis, which is good for requirements like outlier filtering.

\n

See this example:

\n\n\n\n\n\n\n\n

Moreover, when min, max of an axis is set (e.g., yAxis: {min: 0, max: 400}), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.

\n


\n
\n

✦ How to set window ✦

\n

You can set the current window in two forms:

\n\n

Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in option.

\n
option = {\n    dataZoom: [\n        {\n            id: 'dataZoomX',\n            type: 'slider',\n            xAxisIndex: [0],\n            filterMode: 'filter',   // Set as 'filter' so that the modification\n                                    // of window of xAxis will effect the\n                                    // window of yAxis.\n            start: 30,\n            end: 70\n        },\n        {\n            id: 'dataZoomY',\n            type: 'slider',\n            yAxisIndex: [0],\n            filterMode: 'empty',\n            start: 20,\n            end: 80\n        }\n    ],\n    xAxis: {\n        type: 'value'\n    },\n    yAxis: {\n        type: 'value'\n        // Notice there is no min or max set to\n        // restrict the view extent of yAxis.\n    },\n    series{\n        type: 'bar',\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n
\n

What is the exact meaning of start: 20, end: 80 in dataZoomY in the example above?

\n
    \n

  • If yAxis.min and yAxis.max are set:

    \n

    start: 20, end: 80 of dataZoomY means: from 20% to 80% out of [yAxis.min, yAxis.max].

    \n

    If one of yAxis.min and yAxis.max is not set, the corresponding edge of the full extend also follow rule as follows.

    \n
    • \n

  • If yAxis.min and yAxis.max are not set:

    \n
      \n

    • If dataZoomX is set to be filterMode: 'empty':

      \n

      start: 20, end: 80 of dataZoomY means: from 20% to 80% out of [dataMinY to dataMaxY] of series.data (i.e., [9, 80] in the example above).

      \n
      • \n

    • If dataZoomX is set to filterMode: 'filter':

      \n

      Since dataZoomX is defined before dataZoomY, start: 30, end: 70 of dataZoomX means: from 30% to 70% out of full series.data, whereas start: 20, end: 80 of dataZoomY means: from 20% to 80% out of the series.data having been filtered by dataZoomX.

      \n

      If you want to change the process sequence, you can just change the sequence of the definitions apearing in option.

      \n
      • \n
    \n
    • \n
\n


\n

\n","properties":{}},"visualMap":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"

Continuous visualMap component (visualMapContinuous)

\n

(See the introduction to visual Map component (visualMap))

\n

You can set visualMap.calculable to show or hide the handles, which are used to change the selected range in visualMapContinuous.

\n


\n

\n","properties":{"type":{"type":["string"],"description":"

Used to determine that it is a continuous visualMap component.

\n","default":"continuous"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"min":{"type":["number"],"description":"\n\n

Specify the min dataValue for the visualMap component. [visualMap.min, visualMax.max] make up the domain of viusul mapping.

\n

Notice that min and max should be specified explicitly, and be [0, 200] by default, but not dataMin and dataMax in series.data.

\n","uiControl":{"type":"number"}},"max":{"type":["number"],"description":"\n\n

Specify the max dataValue for the visualMap component. [visualMap.min, visualMax.max] make up the domain of viusul mapping.

\n

Notice that min and max should be specified explicitly, and be [0, 200] by default, but not dataMin and dataMax in series.data.

\n","uiControl":{"type":"number"}},"range":{"type":["Array"],"description":"

Specify selected range, that is, the dataValue corresponding to the two handles. For example:

\n
chart.setOption({\n    visualMap: {\n        min: 0,\n        max: 100,\n        // dataValue corresponding to the two handles.\n        range: [4, 15],\n        ...\n    }\n});\n
\n

auto-adaption when min or max is modified by setOption

\n
    \n
  • If range is not set (or set to null or undefined)
    • \n
\n
For instance:\nchart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.\n// Then range will be auto-modified to the new [min, max], that is, [0, 400].\n
\n
    \n
  • If range is set explicitly, such as [10, 300]
    • \n
\n
For instance:\nchart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.\n// Then range keep the original value ([20, 80]) but will not do auto-adaption.\n\nchart.setOption({visualMap: {range: null}}); // Set range to null then.\n// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].\n\n
\n

range gotten by getOption is always an Array, but not null or undefined.

\n"},"calculable":{"type":["boolean"],"description":"\n\n

Whether show handles, which can be dragged to adjust "selected range".

\n

Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when visualMap.type is not set, and visualMap.calculable was set to be true, visualMap.type will be automatically set as 'continuous', regardless of some settings such as visualMap-piecewise.splitNumber. Therefore, it is recommended to set visualMap.type explicitly, which avoids ambiguity.

\n","uiControl":{"type":"boolean"},"default":false},"realtime":{"type":["boolean"],"description":"\n\n

Whether to update view in real time when dragging a handle.

\n
    \n

  • If true, the chart view will be updated in real time when dragging.

    \n
    • \n

  • If false, the chart view will be updated at the end of the handle dragging.

    \n
    • \n
\n","uiControl":{"type":"boolean","default":"true"},"default":true},"inverse":{"type":["boolean"],"description":"\n\n

Whether to inverse the layout of visualMap component.

\n

As inverse is false, the layout direction is the same as cartesian coordinate. That is:

\n
    \n
  • As visualMap.orient is 'vertical', large data are placed at the top while small at the bottom.
    • \n
  • As visualMap.orient is 'horizontal', large data are placed on the right while small on the left.
    • \n
\n

As inverse is true, the result is opposite.

\n","uiControl":{"type":"boolean"},"default":false},"precision":{"type":["number"],"description":"\n\n

The decimal precision of label, defaults to be 0 (no decimals).

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":0},"itemWidth":{"type":["number"],"description":"\n\n

The width of the main bar of visualMap component.

\n","uiControl":{"type":"number","default":"20","min":"0"},"default":20},"itemHeight":{"type":["number"],"description":"\n\n

The height of the main bar of visualMap component.

\n","uiControl":{"type":"number","default":"140","min":"0"},"default":140},"align":{"type":["string"],"description":"\n\n

Specify the position of handles and labels, against the main bar. The possible values are:

\n
    \n
  • 'auto' Decide automatically.
    • \n
  • 'left' The handles and labels are on the right, which is valid when orient is set as 'horizontal'.
    • \n
  • 'right' The handles and labels are on the left, which is valid when orient is set as 'horizontal'.
    • \n
  • 'top' the handles and labels are at the bottom, which is valid when orient is set as 'vertical'.
    • \n
  • 'bottom' the handles and labels are at the top, which is valid when orient is set as 'vertical'.
    • \n
\n","uiControl":{"type":"enum","options":"auto,left,right,top,bottom"},"default":"'auto'"},"text":{"type":["Array"],"description":"

The label text on both ends, such as ['High', 'Low']. sample.

\n

You can understand the order of items in text array just by a simple trial. See visualMap.inverse.

\n","default":null},"textGap":{"type":["number"],"description":"\n\n

The distance between the ends of the main bar and the label, with unit px. See visualMap-continuous.text

\n","uiControl":{"type":"number","default":"10","step":"0.5"},"default":10},"show":{"type":["boolean"],"description":"

Whether to show visualMap-continuous component. If set as false, visualMap-continuous component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.

\n","default":true},"dimension":{"type":["string"],"description":"

Specify which dimension should be used to fetch dataValue from series.data, and then map them to visual channel.

\n

series.data can be regarded as a two-dimensional array, for instance:

\n
[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n
\n

Each column of the above array is regarded as a dimension. For example, when property dimension is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.

\n

Use the last dimension of data by default.

\n"},"seriesIndex":{"type":["number","Array"],"description":"

Specify visual mapping should be performed on which series, from which\nseries.data is fetched.

\n

All series are used by default.

\n"},"hoverLink":{"type":["boolean"],"description":"

hoverLink enable highlight certain graphical elements of chart when mouse hovers on some place of visualMap component that is corresponding to those graphical elements by visual mapping.

\n

Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in visualMap.

\n","default":true},"inRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are in selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n
    \n
  • symbol: Type of symbol.
    • \n
  • symbolSize: Symbol size.
    • \n
  • color: Symbol color.
    • \n
  • colorAlpha: Symbol alpha channel.
    • \n
  • opacity: Opacity of symbol and others (like labels).
    • \n
  • colorLightness: Lightness in HSL.
    • \n
  • colorSaturation: Saturation in HSL.
    • \n
  • colorHue: Hue in HSL.
    • \n
\n

inRange could customize visual channels both in series (by visualMap-continuous.seriesIndex) and in visualMap-continuous itself.

\n

For instance, if a visualMap-continuous component is used on a scatter chart, the mapping approach from data to color (or symbol, size, ...) can be both customized in the scatter chart and visualMap-continuous component itself. See the code as following:

\n
visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        inRange: {\n            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n            symbolSize: [30, 100]\n        }\n    }\n]\n
\n

If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:

\n
visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n
\n

Or define as follows:

\n
visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        inRange: {\n            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n
\n


\n
\n

✦ About visual channels ✦

\n
    \n

  • Various visual channels (such as color、symbolSize and ect.) can be defined in inRange at the same time and all of them will be apopted.

    \n
    • \n

  • Basically visual channels opacity is recommended, rather than colorAlpha. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.

    \n
    • \n

  • There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.

    \n
    • \n
\n


\n
\n

✦ Linear Mapping to visual channel ✦

\n

Linear Mapping means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max] to a given range of [visual value 1, visual value 2] and obtaining a final value (say visual value) for visual channel rendering.

\n

For instance, [visualMap.min, visualMap.max] is set to be [0, 100], and there is series.data: [50, 10, 100]. We intend to map them to an opacity range [0.4, 1], by which the size of value can be demonstrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1], cooresponding to each dataValue.

\n

We can also set the visual range inversely, such as opacity: [1, 0.4], and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4].

\n

Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not dataMin and dataMax in series.data.

\n

How to configure visualMap component to do Linear Mapping?

\n\n

About the value of visual channel (visual value):

\n
    \n

  • Basically Array is used to express the range of visual value, e.g., color: ['#333', '#777'].

    \n
    • \n

  • Single number or single string can also be used, which will be converted to an Array by visualMap component. e.g.: opacity: 0.4 will be converted to opacity: [0.4, 0.4], color: '#333' will be converted to color: ['#333', '#333'].

    \n
    • \n

  • For visual channel symbolSize, opacity, colorAlpha, colorLightness, colorSaturation, colorHue, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]. For example, colorLightness: [0.8, 0.2] means that the dataValue in series.data that equals to visualMap.min (if any) will be mapped to lightness 0.8, and the dataValue that equals to visualMap.max (if any) will be mapped to lightness 0.2, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max] and the range of [0.8, 0.2].

    \n
    • \n

  • For visual channel color, array is used, like: ['#333', '#78ab23', 'blue'], which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min will be mapped onto '#333', the dataValue that equals to visualMap.max will be mapped onto 'blue', and other dataValues will be piecewisely interpolated to get the final color.

    \n
    • \n

  • For visual channel symbol, array is used, like: ['circle', 'rect', 'diamond'], where the dataValue that equals to visualMap.min will be mapped onto 'circle', the dataValue that equals to visualMap.max will be mapped onto 'diamond', and other dataValues will be calculated based on the numerical distance to visualMax.min and to visualMap.max, and mapped onto one of 'circle', 'rect', 'diamond'.

    \n
    • \n
\n

About the possible value range of visual value:

\n
    \n

  • opacity、colorAlpha、colorLightness、colorSaturation、visual value

    \n

    possible value range is [0, 1].

    \n
    • \n

  • colorHue：

    \n

    possible value range is [0, 360].

    \n
    • \n

  • color：

    \n

    color can use RGB expression, like 'rgb(128, 128, 128)', or RGBA expression, like 'rgba(128, 128, 128, 0.5)', or Hex expression, like '#ccc'.

    \n
    • \n

  • symbol：

    \n
    • \n
\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n


\n
\n

✦ Table Mapping to visual channel ✦

\n

Table Mapping could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.

\n

For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}, by which the visualMap component will map dataValue to color.

\n

How to configure visualMap component to do Table Mapping?

\n

When use visualMap-piecewise and visualMap-piecewise.categoriesis set.

\n

About the value of visual channel (visual value):

\n

Generally Object or Array is used, for instance:

\n
visualMap: {\n    type: 'piecewise',\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            'Warden': 'red',\n            'Demon Hunter': 'black',\n            '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n                        // all other dataValues should be mapped to 'green'.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: 'green',\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: ['red', 'black', 'green', 'yellow', 'white']\n    }\n}\n
\n

Example

\n

✦ How to modify configurations of visual encoding? ✦

\n

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

\n
chart.setOption({\n    visualMap: {\n        inRange: {color: ['red', 'blue']}\n    }\n});\n
\n

Notice:

\n
    \n

  • These visualMap properties (i.e. inRange, outOfRange, target, controller) do not support "merge", that is, anyone among them is modified when use setOption again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption, no matter they are to be changed.

    \n
    • \n

  • This way, getOption() -> modify the gotten option -> setOption(modified option), is strongly not recommended, for instance:

    \n
    • \n
\n
// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demonstrated before this example.\n
\n

Notice: There is default color ['#f6efa6', '#d88273', '#bf444c'] in inRange if you not set inRange. If you don't want it, set inRange: {color: null} to disable it.

\n"},"outOfRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are out of selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n

See available configurations in visualMap-continuous.inRange

\n"},"controller":{"type":["Object"],"description":"

Property inRange and outOfRange can be set within property controller, which means those inRange and outOfRange are only used on the controller (visualMap component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.

\n","properties":{"inRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are in selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n

See available configurations in visualMap-continuous.inRange

\n"},"outOfRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are out of selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n

See available configurations in visualMap-continuous.inRange

\n"}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":4},"left":{"type":["string","number"],"description":"

Distance between visualMap component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":0},"top":{"type":["string","number"],"description":"

Distance between visualMap component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"auto"},"right":{"type":["string","number"],"description":"

Distance between visualMap component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"auto"},"bottom":{"type":["string","number"],"description":"

Distance between visualMap component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":0},"orient":{"type":["string"],"description":"

How to layout the visualMap component, 'horizontal' or 'vertical'.

\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"\n\n

visualMap-continuous space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"backgroundColor":{"type":["Color"],"description":"

background color of visualMap component.

\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"

border color of visualMap component.

\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"

border width of visualMap component, with unit: px.

\n","default":0},"color":{"type":["Array"],"description":"

This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in visualMap-continuous.inRange, or visualMap-continuous.outOfRange if needed.

\n

If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property color is from large to small, whereas that in visualMap-continuous.inRange or visualMap-continuous.outOfRange is from small to large.

\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

visualMap text color.

\n","uiControl":{"type":"color","default":"#333"},"default":"#333"},"fontStyle":{"type":["string"],"description":"\n\n

visualMap font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

visualMap font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

visualMap font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

visualMap font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"formatter":{"type":["string","Function"],"description":"

the formatter tool for label.

\n
    \n

  • If it was set as a string, it refers to a template, for instance: aaaa{value}bbbb, where {value} represents the value of the edge of the selected range.

    \n
    • \n

  • If it was set as a Function, it refers to a callback function, for instance:

    \n
    • \n
\n
formatter: function (value) {\n    return 'aaaa' + value + 'bbbb';\n}\n
\n"},"handleIcon":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Icon of drag handle.

\n
'M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z'\n
\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"handleSize":{"type":["number","string"],"description":"
\n

Since v5.0.0

\n
\n

Size of drag handle. It can be a percent string.

\n","default":"'120%'"},"handleStyle":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Style of drag handle.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#fff"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"indicatorIcon":{"type":["string"],"description":"

Icon of indicator.

\n
\n

Since v5.0.0

\n
\n\n","uiControl":{"type":"icon"},"default":"'circle'"},"indicatorSize":{"type":["number","string"],"description":"
\n

Since v5.0.0

\n
\n

Size of indicator. It can be a percent string.

\n","default":"'50%'"},"indicatorStyle":{"type":["Object"],"description":"

Style of indicator.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#fff"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"2","min":"0","step":"0.5"},"default":2},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"rgba(0,0,0,0.2)"},"default":"rgba(0,0,0,0.2)"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"1","step":"0.5"},"default":1},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"1","step":"0.5"},"default":1},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},{"type":["Object"],"description":"

Piecewise visualMap component (visualMapPiecewise)

\n

(Reference to the introduction of visual Map component (visualMap))

\n

Sample:

\n\n\n\n\n

Piecewise visualMap component works in one of the three modes:

\n\n


\n

\n","properties":{"type":{"type":["string"],"description":"

Used to determine it is a piecewise visualMap component.

\n","default":"piecewise"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"splitNumber":{"type":["number"],"description":"\n\n

Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.

\n

The range of continuous data should be defined by max and min.

\n

If visualMap-piecewise.pieces or visualMap-piecewise.categories is set up, the splitNumber will not be used any more.

\n","uiControl":{"type":"number","default":"5","min":"1","step":"1"},"default":5},"pieces":{"type":["Array"],"description":"

Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:

\n
pieces: [\n    // Range of a piece can be specified by property min and max,\n    // where min will be set as -Infinity if ignored,\n    // and max will be set as Infinity if ignored.\n    {min: 1500},\n    {min: 900, max: 1500},\n    {min: 310, max: 1000},\n    {min: 200, max: 300},\n    // Label of the piece can be specified.\n    {min: 10, max: 200, label: '10 to 200 (custom label) '},\n    // Color of the piece can be specified.\n    {value: 123, label: '123 (custom special color) ', color: 'grey'},\n    {max: 5}\n]\n
\n

These visual channel can be customized in each piece:

\n
    \n
  • symbol: Type of symbol.
    • \n
  • symbolSize: Symbol size.
    • \n
  • color: Symbol color.
    • \n
  • colorAlpha: Symbol alpha channel.
    • \n
  • opacity: Opacity of symbol and others (like labels).
    • \n
  • colorLightness: Lightness in HSL.
    • \n
  • colorSaturation: Saturation in HSL.
    • \n
  • colorHue: Hue in HSL.
    • \n
\n

(Notes: In ECharts2, pieces is called splitList, which is retained in ECharts3 for compatibility. But pieces is recommended.)

\n

You would realize the sequence in pieces by a simple trial. See more detailed rules in visualMap.inverse.

\n"},"categories":{"type":["Array"],"description":"

When dataValues in series.data (specified by visualMap-piecewise.dimension) are discrete (or also known as category data or enumerable data), and we intend to perform Table Mapping from dataValue to visual channels, categories is used to describe the entire enumeration of data. For instance:

\n
categories: [\n    'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n],\n
\n

Sample

\n

You would realize the sequence in categories by a simple trial. See more detailed rules in visualMap.inverse.

\n"},"min":{"type":["number"],"description":"\n\n

Specify the min dataValue for the visualMap component. [visualMap.min, visualMax.max] make up the domain of viusul mapping.

\n

In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), max and min doesn't need to be specified.

\n

In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), they should be specified explicitly, and be [0, 200] by default, but not dataMin and dataMax in series.data.

\n","uiControl":{"type":"number"}},"max":{"type":["number"],"description":"\n\n

Specify the max dataValue for the visualMap component. [visualMap.min, visualMax.max] make up the domain of viusul mapping.

\n

In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), max and min doesn't need to be specified.

\n

In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), they should be specified explicitly, and be [0, 200] by default, but not dataMin and dataMax in series.data.

\n","uiControl":{"type":"number"}},"minOpen":{"type":["boolean"],"description":"\n\n

This option works when type is piecewise and min/max/splitNumber are set.

\n

If it is set as true, an extra piece labeled with "< min" will show.

\n","uiControl":{"type":"boolean"}},"maxOpen":{"type":["boolean"],"description":"\n\n

This option works when type is piecewise and min/max/splitNumber are set.

\n

If it is set as true, an extra piece labeled with "> max" will show.

\n","uiControl":{"type":"boolean"}},"selectedMode":{"type":["string","boolean"],"description":"\n\n

Selected Mode could be:

\n
    \n
  • 'multiple' (multiple selection).
    • \n
  • 'single' (single selection).
    • \n
  • true (single selection) since version 5.3.3.
    • \n
  • false (no selection) since version 5.3.3.
    • \n
\n","uiControl":{"type":"enum","options":"single,multiple,true,false"},"default":"'multiple'"},"inverse":{"type":["boolean"],"description":"\n\n

Whether to inverse the layout of visualMap component.

\n\n

If you just have a try, you'll know it is not so complicated.

\n","uiControl":{"type":"boolean"},"default":false},"precision":{"type":["number"],"description":"\n\n

The decimal precision of label, defaults to be 0 (no decimals).

\n\n","uiControl":{"type":"number","min":"0","step":"1"},"default":null},"itemWidth":{"type":["number"],"description":"\n\n

The width of each graphical element that represents a piece.

\n","uiControl":{"type":"number","default":"20","min":"0"},"default":20},"itemHeight":{"type":["number"],"description":"\n\n

The height of each graphical element that represents a piece.

\n","uiControl":{"type":"number","default":"14","min":"0"},"default":14},"align":{"type":["string"],"description":"\n\n

The layout relationship between the graphical elements for pieces and their labels. Possible values are:

\n
    \n
  • 'auto' Decide automatically.
    • \n
  • 'left' The graphical elements for pieces are on the left and their labels are on the right.
    • \n
  • 'right' The graphical elements for pieces are on the right and their labels are on the left.
    • \n
\n","uiControl":{"type":"enum","options":"auto,left,right"},"default":"'auto'"},"text":{"type":["Array"],"description":"

The label text on both ends, such as ['High', 'Low']. Sample.

\n

You can understand the order of items in text array just by a simple trial. See visualMap.inverse.

\n

The rule, that labels will not show when text is use, is retained for compatibility with ECharts2.

\n","default":null},"textGap":{"type":["number"],"description":"\n\n

The distance between the ends of the graphical elements for pieces and the labels, with unit px. See visualMap-piecewise.text

\n","uiControl":{"type":"number","default":"10"},"default":10},"showLabel":{"type":["boolean"],"description":"\n\n

Whether to show label of each item. By default, label will not be shown when visualMap-piecewise.text used, otherwise label will be shown.

\n","uiControl":{"type":"boolean"}},"itemGap":{"type":["*"],"description":"\n\n

Its the distance between each two graphical elements for pieces. The unit is px.

\n","uiControl":{"type":"number","default":"10"},"default":10},"itemSymbol":{"type":["string"],"description":"

Default symbol (the shape of graphical element). Possible values are:

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

The setting of visual channel symbol can refer to visualMap-piecewise.inRange and visualMap-piecewise.outOfRange.

\n

When they are not specified, itemSymbol is adopted as the default value (but just used in visualMap component itself, not in chart).

\n","default":"'roundRect'"},"show":{"type":["boolean"],"description":"

Whether to show visualMap-piecewise component. If set as false, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.

\n","default":true},"dimension":{"type":["string"],"description":"

Specify which dimension should be used to fetch dataValue from series.data, and then map them to visual channel.

\n

series.data can be regarded as a two-dimensional array, for instance:

\n
[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n
\n

Each column of the above array is regarded as a dimension. For example, when property dimension is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.

\n

Use the last dimension of data by default.

\n"},"seriesIndex":{"type":["number","Array"],"description":"

Specify visual mapping should be performed on which series, from which\nseries.data is fetched.

\n

All series are used by default.

\n"},"hoverLink":{"type":["boolean"],"description":"

hoverLink enable highlight certain graphical elements of chart when mouse hovers on some place of visualMap component that is corresponding to those graphical elements by visual mapping.

\n

Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in visualMap.

\n","default":true},"inRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are in selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n
    \n
  • symbol: Type of symbol.
    • \n
  • symbolSize: Symbol size.
    • \n
  • color: Symbol color.
    • \n
  • colorAlpha: Symbol alpha channel.
    • \n
  • opacity: Opacity of symbol and others (like labels).
    • \n
  • colorLightness: Lightness in HSL.
    • \n
  • colorSaturation: Saturation in HSL.
    • \n
  • colorHue: Hue in HSL.
    • \n
\n

inRange could customize visual channels both in series (by visualMap-piecewise.seriesIndex) and in visualMap-piecewise itself.

\n

For instance, if a visualMap-piecewise component is used on a scatter chart, the mapping approach from data to color (or symbol, size, ...) can be both customized in the scatter chart and visualMap-piecewise component itself. See the code as following:

\n
visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        inRange: {\n            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n            symbolSize: [30, 100]\n        }\n    }\n]\n
\n

If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:

\n
visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n
\n

Or define as follows:

\n
visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        inRange: {\n            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n
\n


\n
\n

✦ About visual channels ✦

\n
    \n

  • Various visual channels (such as color、symbolSize and ect.) can be defined in inRange at the same time and all of them will be apopted.

    \n
    • \n

  • Basically visual channels opacity is recommended, rather than colorAlpha. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.

    \n
    • \n

  • There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.

    \n
    • \n
\n


\n
\n

✦ Linear Mapping to visual channel ✦

\n

Linear Mapping means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of [visaulMap.min, visualMap.max] to a given range of [visual value 1, visual value 2] and obtaining a final value (say visual value) for visual channel rendering.

\n

For instance, [visualMap.min, visualMap.max] is set to be [0, 100], and there is series.data: [50, 10, 100]. We intend to map them to an opacity range [0.4, 1], by which the size of value can be demonstrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values [0.7, 0.44, 1], cooresponding to each dataValue.

\n

We can also set the visual range inversely, such as opacity: [1, 0.4], and the final mapping result for the given series.data above will be [0.7, 0.96, 0.4].

\n

Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not dataMin and dataMax in series.data.

\n

How to configure visualMap component to do Linear Mapping?

\n\n

About the value of visual channel (visual value):

\n
    \n

  • Basically Array is used to express the range of visual value, e.g., color: ['#333', '#777'].

    \n
    • \n

  • Single number or single string can also be used, which will be converted to an Array by visualMap component. e.g.: opacity: 0.4 will be converted to opacity: [0.4, 0.4], color: '#333' will be converted to color: ['#333', '#333'].

    \n
    • \n

  • For visual channel symbolSize, opacity, colorAlpha, colorLightness, colorSaturation, colorHue, the range of visual value is always in the form of: [visual value of visualMap.min, visual value of visualMap.max]. For example, colorLightness: [0.8, 0.2] means that the dataValue in series.data that equals to visualMap.min (if any) will be mapped to lightness 0.8, and the dataValue that equals to visualMap.max (if any) will be mapped to lightness 0.2, and other dataValues will be mapped by the linear calculateion based on the domain of [visualMap.min, visualMap.max] and the range of [0.8, 0.2].

    \n
    • \n

  • For visual channel color, array is used, like: ['#333', '#78ab23', 'blue'], which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to visualMap.min will be mapped onto '#333', the dataValue that equals to visualMap.max will be mapped onto 'blue', and other dataValues will be piecewisely interpolated to get the final color.

    \n
    • \n

  • For visual channel symbol, array is used, like: ['circle', 'rect', 'diamond'], where the dataValue that equals to visualMap.min will be mapped onto 'circle', the dataValue that equals to visualMap.max will be mapped onto 'diamond', and other dataValues will be calculated based on the numerical distance to visualMax.min and to visualMap.max, and mapped onto one of 'circle', 'rect', 'diamond'.

    \n
    • \n
\n

About the possible value range of visual value:

\n
    \n

  • opacity、colorAlpha、colorLightness、colorSaturation、visual value

    \n

    possible value range is [0, 1].

    \n
    • \n

  • colorHue：

    \n

    possible value range is [0, 360].

    \n
    • \n

  • color：

    \n

    color can use RGB expression, like 'rgb(128, 128, 128)', or RGBA expression, like 'rgba(128, 128, 128, 0.5)', or Hex expression, like '#ccc'.

    \n
    • \n

  • symbol：

    \n
    • \n
\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n


\n
\n

✦ Table Mapping to visual channel ✦

\n

Table Mapping could be used when dataValue (values in series.data, specified by visualMap.dimension) is enumerable and we intend to map them to visual value by looking up a given table.

\n

For instance, in a visualMap-piecewise component, visualMap-piecewise.categories is set to ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']. And there is series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']. Then we can establish the lookup rule for color: color: {'Warden': 'red', 'Demon Hunter': 'black'}, by which the visualMap component will map dataValue to color.

\n

How to configure visualMap component to do Table Mapping?

\n

When use visualMap-piecewise and visualMap-piecewise.categoriesis set.

\n

About the value of visual channel (visual value):

\n

Generally Object or Array is used, for instance:

\n
visualMap: {\n    type: 'piecewise',\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            'Warden': 'red',\n            'Demon Hunter': 'black',\n            '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n                        // all other dataValues should be mapped to 'green'.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: 'green',\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: ['red', 'black', 'green', 'yellow', 'white']\n    }\n}\n
\n

Example

\n

✦ How to modify configurations of visual encoding? ✦

\n

If you want to modify the configurations of visual encoding after chart been rendered (by invoke setOption to set the initial option), setOption can be used again to modify configurations of visual encoding. For instance:

\n
chart.setOption({\n    visualMap: {\n        inRange: {color: ['red', 'blue']}\n    }\n});\n
\n

Notice:

\n
    \n

  • These visualMap properties (i.e. inRange, outOfRange, target, controller) do not support "merge", that is, anyone among them is modified when use setOption again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to setOption, no matter they are to be changed.

    \n
    • \n

  • This way, getOption() -> modify the gotten option -> setOption(modified option), is strongly not recommended, for instance:

    \n
    • \n
\n
// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demonstrated before this example.\n
\n

Notice: There is default color ['#f6efa6', '#d88273', '#bf444c'] in inRange if you not set inRange. If you don't want it, set inRange: {color: null} to disable it.

\n"},"outOfRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are out of selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n

See available configurations in visualMap-piecewise.inRange

\n"},"controller":{"type":["Object"],"description":"

Property inRange and outOfRange can be set within property controller, which means those inRange and outOfRange are only used on the controller (visualMap component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.

\n","properties":{"inRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are in selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n

See available configurations in visualMap-piecewise.inRange

\n"},"outOfRange":{"type":["Object"],"description":"

Define visual channels that will mapped from dataValues that are out of selected range. User can interact with visualMap component and make a selected range by mouse or touch.

\n

See available configurations in visualMap-piecewise.inRange

\n"}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":4},"left":{"type":["string","number"],"description":"

Distance between visualMap component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":0},"top":{"type":["string","number"],"description":"

Distance between visualMap component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"auto"},"right":{"type":["string","number"],"description":"

Distance between visualMap component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"auto"},"bottom":{"type":["string","number"],"description":"

Distance between visualMap component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":0},"orient":{"type":["string"],"description":"

How to layout the visualMap component, 'horizontal' or 'vertical'.

\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"\n\n

visualMap-piecewise space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"backgroundColor":{"type":["Color"],"description":"

background color of visualMap component.

\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"

border color of visualMap component.

\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"

border width of visualMap component, with unit: px.

\n","default":0},"color":{"type":["Array"],"description":"

This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in visualMap-piecewise.inRange, or visualMap-piecewise.outOfRange if needed.

\n

If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property color is from large to small, whereas that in visualMap-piecewise.inRange or visualMap-piecewise.outOfRange is from small to large.

\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

visualMap text color.

\n","uiControl":{"type":"color","default":"#333"},"default":"#333"},"fontStyle":{"type":["string"],"description":"\n\n

visualMap font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

visualMap font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

visualMap font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

visualMap font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"formatter":{"type":["string","Function"],"description":"

the formatter tool for label.

\n
    \n

  • If it was set as a string, it refers to a template, for instance: aaaa{value}bbbb{value2}, where {value} and {value2} represents the current selected range of dataValues.

    \n
    • \n

  • If it was set as a Function, it refers to a callback function, for instance:

    \n
    • \n
\n
formatter: function (value, value2) {\n    return 'aaaa' + value + 'bbbb' + value2;\n}\n
\n"}}}]},"description":"

visualMap is a type of component for visual encoding, which maps the data to visual channels, including:

\n
    \n
  • symbol: Type of symbol.
    • \n
  • symbolSize: Symbol size.
    • \n
  • color: Symbol color.
    • \n
  • colorAlpha: Symbol alpha channel.
    • \n
  • opacity: Opacity of symbol and others (like labels).
    • \n
  • colorLightness: Lightness in HSL.
    • \n
  • colorSaturation: Saturation in HSL.
    • \n
  • colorHue: Hue in HSL.
    • \n
\n

Multiple visualMap component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.

\n

visualMap could be defined as Piecewise (visualMapPiecewise) or Continuous (visualMapContinuous), which is distinguished by the property type. For instance:

\n
option = {\n    visualMap: [\n        { // the first visualMap component\n            type: 'continuous', // defined to be continuous visualMap\n            ...\n        },\n        { // the second visualMap component\n            type: 'piecewise', // defined to be piecewise visualMap\n            ...\n        }\n    ],\n    ...\n};\n
\n


\n✦ Configure mapping ✦

\n

The dimension of series.data can be specified by visualMap.dimension, from which the value can be retrieved and mapped onto visual channels, which can be defined in visualMap.inRange and visualMap.outOfRange.

\n


\nIn series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:

\n
series: {\n    type: '...',\n    data: [\n        {name: 'Shanghai', value: 251},\n        {name: 'Haikou', value: 21},\n        // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,\n        // and series visual config (like color, symbol, ...) can be used to this item.\n        {name: 'Beijing', value: 821, },\n        ...\n    ]\n}\n


\n✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦

\n

visualMap is renamed from the dataRange of ECharts2, and the scope of functionalities are extended a lot. The configurations of dataRange are still compatible in ECharts3, which automatically convert them to visualMap. It is recommended to use visualMap instead of dataRange in ECharts3.

\n


\n✦ The detailed configurations of visualMap are elaborated as follows. ✦

\n


\n

\n","properties":{}},"tooltip":{"type":["Object"],"description":"

Tooltip component.

\n
\n

General Introduction:

\n

tooltip can be configured on different places:

\n\n\n\n\n","exampleBaseOptions":[{"code":"\nvar base = +new Date(2016, 9, 3);\nvar oneDay = 24 * 3600 * 1000;\nvar valueBase = Math.random() * 300;\nvar valueBase2 = Math.random() * 50;\nvar data = [];\nvar data2 = [];\n\nfor (var i = 1; i < 10; i++) {\n var now = new Date(base += oneDay);\n var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');\n\n valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);\n valueBase <= 0 && (valueBase = Math.random() * 300);\n data.push([dayStr, valueBase]);\n\n valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);\n valueBase2 <= 0 && (valueBase2 = Math.random() * 50);\n data2.push([dayStr, valueBase2]);\n}\n\nconst option = {\n legend: {\n top: 'bottom',\n data: ['意向']\n },\n tooltip: {\n triggerOn: 'none',\n alwaysShowContent: true,\n position: function (pt) {\n return [pt[0], 130];\n }\n },\n xAxis: {\n type: 'time',\n // boundaryGap: [0, 0],\n axisPointer: {\n value: '2016-10-7',\n snap: true,\n label: {\n show: true,\n formatter: function (params) {\n return echarts.format.formatTime('yyyy-MM-dd', params.value);\n }\n },\n handle: {\n show: true\n }\n },\n splitLine: {\n show: false\n }\n },\n yAxis: {\n type: 'value',\n axisTick: {\n inside: true\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n inside: true\n },\n z: 10\n },\n grid: {\n top: 110,\n left: 15,\n right: 15,\n height: 160\n },\n series: [\n {\n name: '模拟数据',\n type: 'line',\n smooth: true,\n symbol: 'circle',\n symbolSize: 5,\n sampling: 'average',\n itemStyle: {\n color: '#8ec6ad'\n },\n stack: 'a',\n areaStyle: {\n },\n data: data\n },\n {\n name: '模拟数据',\n type: 'line',\n smooth: true,\n stack: 'a',\n symbol: 'circle',\n symbolSize: 5,\n sampling: 'average',\n itemStyle: {\n color: '#d68262'\n },\n areaStyle: {\n },\n data: data2\n }\n\n ]\n};\n","name":"tooltip","title":"提示框","title-en":"Tooltip"}],"properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip component.

\n

including tooltip floating layer and axisPointer.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"trigger":{"type":["string"],"description":"\n\n

Type of triggering.

\n

Options:

\n
    \n

  • 'item'

    \n

    Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.

    \n
    • \n

  • 'axis'

    \n

    Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.

    \n

    ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in grid or polar. Also, you may assign axis with axisPointer.axis.

    \n
    • \n

  • 'none'

    \n

    Trigger nothing.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"item,axis,none","default":"item"},"default":"'item'"},"axisPointer":{"type":["Object"],"description":"

Configuration item for axisPointer.

\n

tooltip.axisPointer is like syntactic sugar of axisPointer settings on axes (for example, xAxis.axisPointer or angleAxis.axisPointer). More detailed features can be configured on someAxis.axisPointer. But in common cases, using tooltip.axisPointer is more convenient.

\n
\n

Notice: configurations of tooltip.axisPointer has lower priority than that of someAxis.axisPointer.

\n
\n
\n

axisPointer is a tool for displaying reference line and axis value under mouse pointer.

\n

For example:

\n\n\n\n

In the demo above, axisPointer.link is used to link axisPointer from different coordinate systems.

\n

axisPointer can also be used on touch device, where user can drag the button to move the reference line and label.

\n\n\n\n

In the cases that more than one axis exist, axisPointer helps to look inside the data.

\n\n\n\n\n\n\n
\n
\n

Notice:\nGenerally, axisPointers is configured in each axes who need them (for example xAxis.axisPointer), or configured in tooltip (for example tooltip.axisPointer).

\n
\n
\n

But these configurations can only be configured in global axisPointer:\naxisPointer.triggerOn, axisPointer.link.

\n
\n
\n
\n

How to display axisPointer:

\n

In cartesian (grid) and polar](~polar) and (single axis, each axis has its own axisPointer.

\n

Those axisPointer will not be displayed by default, utill configured as follows:

\n
    \n

  • Set someAxis.axisPointer.show (like xAxis.axisPointer.show) as true. Then axisPointer of this axis will be displayed.

    \n
    • \n

  • Set tooltip.trigger as 'axis', or set tooltip.axisPointer.type as 'cross'. Then coordinate system will automatically chose the axes who will display their axisPointers. (tooltip.axisPointer.axis can be used to change the choice.) Notice, axis.axisPointer will override tooltip.axisPointer settings.

    \n
    • \n
\n
\n

How to display the label of axisPointer:

\n

The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:

\n\n
\n

How to configure axisPointer on touch device:

\n

Set someAxis.axisPointer.handle.show (for example xAxis.axisPointer.handle.show as true. Then the button for dragging will be displayed. (This feature is not supported on polar).

\n

Notice:\nIf tooltip does not work well in this case, try to settooltip.triggerOn as 'none' (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set tooltip.alwaysShowContent as true (then tooltip will always be displayed).

\n

See the example.

\n
\n

Snap to point

\n

In value axis and time axis, if snap is set as true, axisPointer will snap to point automatically.

\n
\n","properties":{"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n

  • 'cross' crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"none,line,shadow,cross","default":"line"},"default":"'line'"},"axis":{"type":["string"],"description":"

The coordinate axis, which could be 'x', 'y', 'radius', or 'angle'. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).

\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"crossStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'cross'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"dashed"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":200},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"showContent":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be false, if you only need tooltip to trigger the event or show the axisPointer without content.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alwaysShowContent":{"type":["boolean"],"description":"\n\n

Whether to show tooltip content all the time. By default, it will be hidden after some time. It can be set to be true to preserve displaying.

\n

This attribute is newly added to ECharts 3.0.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"triggerOn":{"type":["string"],"description":"\n\n

Conditions to trigger tooltip. Options:

\n
    \n

  • 'mousemove'

    \n

    Trigger when mouse moves.

    \n
    • \n

  • 'click'

    \n

    Trigger when mouse clicks.

    \n
    • \n

  • 'mousemove|click'

    \n

    Trigger when mouse clicks and moves.

    \n
    • \n

  • 'none'

    \n

    Do not triggered by 'mousemove' and 'click'. Tooltip can be triggered and hidden manually by calling action.tooltip.showTip and action.tooltip.hideTip. It can also be triggered by axisPointer.handle in this case.

    \n
    • \n
\n

This attribute is new to ECharts 3.0.

\n","uiControl":{"type":"enum","options":"mousemove,click"},"default":"'mousemove|click'"},"showDelay":{"type":["number"],"description":"\n\n

Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when triggerOn is set to be 'mousemove'.

\n","uiControl":{"type":"number","min":"0","step":"20"},"default":0},"hideDelay":{"type":["number"],"description":"\n\n

Delay time for hiding tooltip, in ms. It will be invalid when alwaysShowContent is true.

\n","uiControl":{"type":"number","min":"0","step":"20","default":"100"},"default":100},"enterable":{"type":["boolean"],"description":"\n\n

Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as true.

\n","uiControl":{"type":"boolean","default":"false"},"default":true},"renderMode":{"type":["string"],"description":"\n\n

Render mode for tooltip. By default, it is set to be 'html' so that extra DOM element is used for tooltip. It can also set to be 'richText' so that the tooltip will be rendered inside Canvas. This is very useful for environments that don't have DOM, such as Wechat applications.

\n","uiControl":{"type":"enum","options":"html,richText","default":"html"},"default":"'html'"},"confine":{"type":["boolean"],"description":"\n\n

Whether confine tooltip content in the view rect of chart instance.

\n

Useful when tooltip is cut because of 'overflow: hidden' set on outer dom of chart instance, or because of narrow screen on mobile.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"appendToBody":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.7.0

\n
\n

(DEPRECATED since v5.5.0, use appendTo instead.)

\n

Whether to append the tooltip DOM element as a child of the <body> of the HTML page, when using renderMode 'html'.

\n

The default value is false, which means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with overflow: hidden. This case could also be resolved by setting tooltip.confine, but it might not suitable for all scenarios.

\n

Here we provide appendToBody: true to auto append the tooltip element to <body>, which is a common way to resolve this kind of issue. But true is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.

\n

Note that it also works when CSS transform used.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"appendTo":{"type":["string","HTMLElement","Function"],"description":"
\n

Since v5.5.0

\n
\n

Which DOM element to append the tooltip to. Only available when using renderMode 'html'.

\n

The default value is null, which means that the tooltip's DOM node will be added as a descendant node of the chart’s DOM container. However, this approach can cause the tooltip to be truncated if it extends beyond the container, due to ancestors of the chart's DOM container having overflow: hidden set. This issue can be partially addressed using tooltip.confine, but it may not cover all scenarios.

\n

For such scenarios, appendTo can be specified. When it is a function, the interface is in the form of

\n
(chartContainer: HTMLElement) => HTMLElement | undefined | null\n
\n

which means it returns the node that the tooltip's DOM node should be added to. Returning undefined or null indicates that the default logic described above should be used. Returning an HTMLElement means that it should be added under that node.

\n

Note that it also works when CSS transform used.

\n"},"className":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

Specify the classes for the tooltip root DOM. (Only works in html render mode).

\n

Example:

\n
className: 'echarts-tooltip echarts-tooltip-dark'\n
\n","uiControl":{"type":"text"}},"transitionDuration":{"type":["number"],"description":"\n\n

The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.

\n","uiControl":{"type":"number","min":"0","step":"0.1","default":"0.4"},"default":0.4},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}},"order":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

Tooltip order for multiple series. Defaults is 'seriesAsc'.

\n

Conditions to order tooltip. Options:

\n
    \n

  • 'seriesAsc'

    \n

    Base on series declaration, ascending order tooltip.

    \n
    • \n

  • 'seriesDesc'

    \n

    Base on series declaration, descending order tooltip.

    \n
    • \n

  • 'valueAsc'

    \n

    Base on value, ascending order tooltip, only for numeric value.

    \n
    • \n

  • 'valueDesc'

    \n

    Base on value, descending order tooltip, only for numeric value.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"seriesAsc,seriesDesc,valueAsc,valueDesc","default":"seriesAsc"},"default":"'seriesAsc'"}}},"axisPointer":{"type":["Object"],"description":"

This is the global configurations of axisPointer.

\n
\n

axisPointer is a tool for displaying reference line and axis value under mouse pointer.

\n

For example:

\n\n\n\n

In the demo above, axisPointer.link is used to link axisPointer from different coordinate systems.

\n

axisPointer can also be used on touch device, where user can drag the button to move the reference line and label.

\n\n\n\n

In the cases that more than one axis exist, axisPointer helps to look inside the data.

\n\n\n\n\n\n\n
\n
\n

Notice:\nGenerally, axisPointers is configured in each axes who need them (for example xAxis.axisPointer), or configured in tooltip (for example tooltip.axisPointer).

\n
\n
\n

But these configurations can only be configured in global axisPointer:\naxisPointer.triggerOn, axisPointer.link.

\n
\n
\n
\n

How to display axisPointer:

\n

In cartesian (grid) and polar](~polar) and (single axis, each axis has its own axisPointer.

\n

Those axisPointer will not be displayed by default, utill configured as follows:

\n
    \n

  • Set someAxis.axisPointer.show (like xAxis.axisPointer.show) as true. Then axisPointer of this axis will be displayed.

    \n
    • \n

  • Set tooltip.trigger as 'axis', or set tooltip.axisPointer.type as 'cross'. Then coordinate system will automatically chose the axes who will display their axisPointers. (tooltip.axisPointer.axis can be used to change the choice.) Notice, axis.axisPointer will override tooltip.axisPointer settings.

    \n
    • \n
\n
\n

How to display the label of axisPointer:

\n

The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:

\n\n
\n

How to configure axisPointer on touch device:

\n

Set someAxis.axisPointer.handle.show (for example xAxis.axisPointer.handle.show as true. Then the button for dragging will be displayed. (This feature is not supported on polar).

\n

Notice:\nIf tooltip does not work well in this case, try to settooltip.triggerOn as 'none' (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set tooltip.alwaysShowContent as true (then tooltip will always be displayed).

\n

See the example.

\n
\n

Snap to point

\n

In value axis and time axis, if snap is set as true, axisPointer will snap to point automatically.

\n
\n
\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

axisPointer will not be displayed by default. But if tooltip.trigger is set as 'axis' or tooltip.axisPointer.type is set as 'cross', axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. tooltip.axisPointer.axis can be used to change the choice.

\n","uiControl":{"type":"boolean"},"default":false},"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"line,shadow,none"},"default":"'line'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"triggerEmphasis":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.4.3

\n
\n

Whether to trigger emphasis of series.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerTooltip":{"type":["boolean"],"description":"\n\n

Whether to trigger tooltip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"value":{"type":["number"],"description":"

current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer.

\n","default":null},"status":{"type":["boolean"],"description":"\n\n

Current status, can be 'show' or 'hide'.

\n","uiControl":{"type":"enum","options":"show,hide"}},"handle":{"type":["Object"],"description":"

A button used to drag axisPointer. This feature is applicable in touch device. See example.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set to true to use handle.

\n","uiControl":{"type":"boolean"},"default":false},"icon":{"type":["*"],"description":"\n\n

The icon of the handle.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See the example of using image

\n","uiControl":{"type":"icon","clean":"true"}},"size":{"type":["number","Array"],"description":"\n\n

The size of the handle, which can be set as a single value or an array ([width, height]).

\n","uiControl":{"type":"vector","default":"45,45","min":"0","step":"0.5","dims":"width,height"},"default":45},"margin":{"type":["number"],"description":"\n\n

Distance from handle center to axis.

\n","uiControl":{"type":"number","default":"50","min":"0","step":"0.5"},"default":50},"color":{"type":["string"],"description":"\n\n

The color of the handle.

\n","uiControl":{"type":"color"},"default":"'#333'"},"throttle":{"type":["number"],"description":"\n\n

Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.

\n","uiControl":{"type":"number","default":"40","min":"0","step":"10"},"default":40},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"2","step":"0.5"},"default":2},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"link":{"type":["Array"],"description":"

axisPointers can be linked to each other. The term "link" represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.

\n

See sampleA and sampleB.

\n

link is an array, where each item represents a "link group". Axes will be linked when they are referred in the same link group. For example:

\n
link: [\n    {\n        // All axes with xAxisIndex 0, 3, 4 and yAxisName 'sameName' will be linked.\n        xAxisIndex: [0, 3, 4],\n        yAxisName: 'someName'\n    },\n    {\n        // All axes with xAxisId 'aa', 'cc' and all angleAxis will be linked.\n        xAxisId: ['aa', 'cc'],\n        angleAxis: 'all'\n    },\n    ...\n]\n
\n

As illustrated above, axes can be referred in these approaches in a link group:

\n
{\n    // 'some' represent the dimension name of a axis, namely, 'x', 'y', 'radius', 'angle', 'single'\n    someAxisIndex: [...], // can be an array or a value or 'all'\n    someAxisName: [...],  // can be an array or a value or 'all'\n    someAxisId: [...],    // can be an array or a value or 'all'\n}\n
\n
\n
\n

How to link axes with different axis.type?

\n

For example, the type of axisA is 'category', and the type of axisB type is 'time', we can write conversion function (mapper) in link group to convert values from an axis to another axis. For example:

\n
link: [{\n    xAxisIndex: [0, 1],\n    yAxisName: ['yy'],\n    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n        if (sourceAxisInfo.axisName === 'yy') {\n            // from timestamp to '2012-02-05'\n            return echarts.time.format('yyyy-MM-dd', sourceVal);\n        }\n        else if (targetAxisInfo.axisName === 'yy') {\n            // from '2012-02-05' to date\n            return echarts.time.parse(dates[sourceVal]);\n        }\n        else {\n            return sourceVal;\n        }\n    }\n}]\n
\n

Input parameters of mapper:

\n

{number} sourceVal

\n

{Object} sourceAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}

\n

{Object} targetAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}

\n

Return of mapper:

\n

{number} The result of conversion.

\n"},"triggerOn":{"type":["string"],"description":"\n\n

Conditions to trigger tooltip. Options:

\n
    \n

  • 'mousemove'

    \n

    Trigger when mouse moves.

    \n
    • \n

  • 'click'

    \n

    Trigger when mouse clicks.

    \n
    • \n

  • 'mousemove|click'

    \n

    Trigger when mouse clicks and moves.

    \n
    • \n

  • 'none'

    \n

    Do not triggered by 'mousemove' and 'click'

    \n
    • \n
\n","uiControl":{"type":"enum","options":"mousemove,click,none"},"default":"'mousemove|click'"}}},"toolbox":{"type":["Object"],"description":"

A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset.

\n

Example:

\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"\n\n

Whether to show toolbox component.

\n","uiControl":{"type":"boolean"},"default":true},"orient":{"type":["string"],"description":"\n\n

The layout orientation of toolbox's icon.

\n

Options:

\n
    \n
  • 'horizontal'
    • \n
  • 'vertical'
    • \n
\n","uiControl":{"type":"enum","options":"vertical,horizontal"},"default":"'horizontal'"},"itemSize":{"type":["number"],"description":"\n\n

The size of toolbox's icon.

\n","uiControl":{"type":"number","min":"0","default":"15"},"default":15},"itemGap":{"type":["number"],"description":"\n\n

The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.

\n","uiControl":{"type":"number","min":"0","default":"8"},"default":8},"showTitle":{"type":["boolean"],"description":"\n\n

Whether to show the title of each tool icon when mouse hovers.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"feature":{"type":["Object"],"description":"

The configuration item for each tool.

\n

Besides the tools we provide, user-defined toolbox is also supported.

\n

Notes: User-defined tool name could only start with my, like myTool1 and myTool2 in the below example:

\n
{\n    toolbox: {\n        feature: {\n            myTool1: {\n                show: true,\n                title: 'custom extension method 1',\n                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',\n                onclick: function (){\n                    alert('myToolHandler1')\n                }\n            },\n            myTool2: {\n                show: true,\n                title: 'custom extension method',\n                icon: 'image://https://echarts.apache.org/en/images/favicon.png',\n                onclick: function (){\n                    alert('myToolHandler2')\n                }\n            }\n        }\n    }\n}\n
\n","properties":{"saveAsImage":{"type":["Object"],"description":"

Save as image.

\n","properties":{"type":{"type":["string"],"description":"\n\n

File suffix of the image saved.

\n
    \n
  • If the renderer is set to be 'canvas' when chart initialized (default), then 'png' (default) and 'jpg' are supported.
    • \n
  • If the renderer is set to be 'svg' when when chart initialized, then only 'svg' is supported for type ('svg' type is supported since v4.8.0).
    • \n
\n","uiControl":{"type":"enum","options":"png,jpg"},"default":"'png'"},"name":{"type":["string"],"description":"\n\n

Name to save the image, whose default value is title.text.

\n","uiControl":{"type":"text"}},"backgroundColor":{"type":["Color"],"description":"\n\n

Background color to save the image, whose default value is backgroundColor. If backgroundColor is not set, white color is used.

\n","uiControl":{"type":"color"},"default":"'auto'"},"connectedBackgroundColor":{"type":["Color"],"description":"\n\n

When echarts.connect is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.

\n","uiControl":{"type":"color"},"default":"'#fff'"},"excludeComponents":{"type":["Array"],"description":"

Components to be excluded when export. By default, toolbox is excluded.

\n","default":"['toolbox']"},"show":{"type":["boolean"],"description":"

Whether to show the tool.

\n","default":true},"title":{"type":["string"],"description":"","default":"'save as image'"},"icon":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"iconStyle":{"type":["Object"],"description":"

The style setting of save as image icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under emphasis.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"none"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#666"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textPosition":{"type":["string"],"description":"

Text position: 'left' / 'right' / 'top' / 'bottom'.

\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"\n\n

Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and '#000'.

\n","uiControl":{"type":"color"},"default":"'#000'"},"textAlign":{"type":["string"],"description":"\n\n

Text align: 'left' / 'center' / 'right'.

\n","uiControl":{"type":"enum","options":"left,center,right"},"default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"\n\n

Text background color.

\n","uiControl":{"type":"color"}},"textBorderRadius":{"type":["number"],"description":"\n\n

Border radius of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"textPadding":{"type":["number"],"description":"\n\n

Padding of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}}}}}},"pixelRatio":{"type":["number"],"description":"\n\n

Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.

\n","uiControl":{"type":"number","min":"0.5","max":"5","step":"0.5"},"default":1}}},"restore":{"type":["Object"],"description":"

Restore configuration item.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show the tool.

\n","default":true},"title":{"type":["string"],"description":"","default":"'restore'"},"icon":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"iconStyle":{"type":["Object"],"description":"

The style setting of restore icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under emphasis.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"none"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#666"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textPosition":{"type":["string"],"description":"

Text position: 'left' / 'right' / 'top' / 'bottom'.

\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"\n\n

Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and '#000'.

\n","uiControl":{"type":"color"},"default":"'#000'"},"textAlign":{"type":["string"],"description":"\n\n

Text align: 'left' / 'center' / 'right'.

\n","uiControl":{"type":"enum","options":"left,center,right"},"default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"\n\n

Text background color.

\n","uiControl":{"type":"color"}},"textBorderRadius":{"type":["number"],"description":"\n\n

Border radius of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"textPadding":{"type":["number"],"description":"\n\n

Padding of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}}}}}}}},"dataView":{"type":["Object"],"description":"

Data view tool, which could display data in current chart and updates chart after being edited.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show the tool.

\n","default":true},"title":{"type":["string"],"description":"","default":"'data view'"},"icon":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"iconStyle":{"type":["Object"],"description":"

The style setting of data view icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under emphasis.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"none"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#666"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textPosition":{"type":["string"],"description":"

Text position: 'left' / 'right' / 'top' / 'bottom'.

\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"\n\n

Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and '#000'.

\n","uiControl":{"type":"color"},"default":"'#000'"},"textAlign":{"type":["string"],"description":"\n\n

Text align: 'left' / 'center' / 'right'.

\n","uiControl":{"type":"enum","options":"left,center,right"},"default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"\n\n

Text background color.

\n","uiControl":{"type":"color"}},"textBorderRadius":{"type":["number"],"description":"\n\n

Border radius of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"textPadding":{"type":["number"],"description":"\n\n

Padding of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}}}}}},"readOnly":{"type":["boolean"],"description":"\n\n

Whether it is read-only.

\n","uiControl":{"type":"boolean"},"default":false},"optionToContent":{"type":["Function"],"description":"
(option:Object) => HTMLDomElement|string\n
\n

Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.

\n

For example:

\n
optionToContent: function(opt) {\n    var axisData = opt.xAxis[0].data;\n    var series = opt.series;\n    var table = '<table style="width:100%;text-align:center"><tbody><tr>'\n                 + '<td>Time:</td>'\n                 + '<td>' + series[0].name + '</td>'\n                 + '<td>' + series[1].name + '</td>'\n                 + '</tr>';\n    for (var i = 0, l = axisData.length; i < l; i++) {\n        table += '<tr>'\n                 + '<td>' + axisData[i] + '</td>'\n                 + '<td>' + series[0].data[i] + '</td>'\n                 + '<td>' + series[1].data[i] + '</td>'\n                 + '</tr>';\n    }\n    table += '</tbody></table>';\n    return table;\n}\n
\n"},"contentToOption":{"type":["Function"],"description":"
(container:HTMLDomElement, option:Object) => Object\n
\n

When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.

\n"},"lang":{"type":["Array"],"description":"

There are 3 names in data view, which are ['data view', 'turn off' and 'refresh'].

\n","default":"['data view', 'turn off', 'refresh']"},"backgroundColor":{"type":["string"],"description":"\n\n

Background color of the floating layer in data view.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'#fff'"},"textareaColor":{"type":["string"],"description":"\n\n

Background color of input area of the floating layer in data view.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'#fff'"},"textareaBorderColor":{"type":["string"],"description":"\n\n

Border color of input area of the floating layer in data view.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"textColor":{"type":["string"],"description":"\n\n

Text color.

\n","uiControl":{"type":"color","default":"#000"},"default":"'#000'"},"buttonColor":{"type":["string"],"description":"\n\n

Button color.

\n","uiControl":{"type":"color","default":"#c23531"},"default":"'#c23531'"},"buttonTextColor":{"type":["string"],"description":"\n\n

Color of button text.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'#fff'"}}},"dataZoom":{"type":["Object"],"description":"

Data area zooming, which only supports rectangular coordinate by now.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show the tool.

\n","default":true},"title":{"type":["Object"],"description":"

Restored and zoomed title text.

\n","properties":{"zoom":{"type":["string"],"description":"","default":"'area zooming'"},"back":{"type":["string"],"description":"","default":"'restore area zooming'"}}},"icon":{"type":["Object"],"description":"

Zooming and restore icon path.

\n","properties":{"zoom":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"back":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"}}},"iconStyle":{"type":["Object"],"description":"

The style setting of data area zooming icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under emphasis.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"none"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#666"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textPosition":{"type":["string"],"description":"

Text position: 'left' / 'right' / 'top' / 'bottom'.

\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"\n\n

Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and '#000'.

\n","uiControl":{"type":"color"},"default":"'#000'"},"textAlign":{"type":["string"],"description":"\n\n

Text align: 'left' / 'center' / 'right'.

\n","uiControl":{"type":"enum","options":"left,center,right"},"default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"\n\n

Text background color.

\n","uiControl":{"type":"color"}},"textBorderRadius":{"type":["number"],"description":"\n\n

Border radius of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"textPadding":{"type":["number"],"description":"\n\n

Padding of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}}}}}},"filterMode":{"type":["string"],"description":"

The same meaning as dataZoom.filterMode.

\n","default":"'filter'"},"xAxisIndex":{"type":["number","Array","boolean"],"description":"

Defines which xAxis should be controlled. By default, it controls all x axes. If it is set to be false, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of 3. If it is set to be [0, 3], it controls the x-axes with axisIndex of 0 and 3.

\n"},"yAxisIndex":{"type":["number","Array","boolean"],"description":"

Defines which yAxis should be controlled. By default, it controls all y axes. If it is set to be false, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of 3. If it is set to be [0, 3], it controls the x-axes with axisIndex of 0 and 3.

\n"},"brushStyle":{"type":["Object"],"description":"

Style of brush rectangle.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"magicType":{"type":["Object"],"description":"

Magic type switching.\n示例:

\n
feature: {\n    magicType: {\n        type: ['line', 'bar', 'stack']\n    }\n}\n
\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show the tool.

\n","default":true},"type":{"type":["Array"],"description":"

Enabled magic types, including 'line' (for line charts), 'bar' (for bar charts), 'stack' (for stacked charts).

\n"},"title":{"type":["Object"],"description":"

Title for different types, can be configured separately.

\n","properties":{"line":{"type":["string"],"description":"","default":"'Switch to Line Chart'"},"bar":{"type":["string"],"description":"","default":"'Switch to Bar Chart'"},"stack":{"type":["string"],"description":"","default":"'Stack'"},"tiled":{"type":["string"],"description":"","default":"'Tile'"}}},"icon":{"type":["Object"],"description":"

the different types of icon path , which could be configurated individually.

\n","properties":{"line":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"bar":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"stack":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"}}},"iconStyle":{"type":["Object"],"description":"

The style setting of magic type switching icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under emphasis.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"none"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#666"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textPosition":{"type":["string"],"description":"

Text position: 'left' / 'right' / 'top' / 'bottom'.

\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"\n\n

Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and '#000'.

\n","uiControl":{"type":"color"},"default":"'#000'"},"textAlign":{"type":["string"],"description":"\n\n

Text align: 'left' / 'center' / 'right'.

\n","uiControl":{"type":"enum","options":"left,center,right"},"default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"\n\n

Text background color.

\n","uiControl":{"type":"color"}},"textBorderRadius":{"type":["number"],"description":"\n\n

Border radius of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"textPadding":{"type":["number"],"description":"\n\n

Padding of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}}}}}},"option":{"type":["Object"],"description":"

Configuration item for each type, which will be used when switching to certain type.

\n","properties":{"line":{"type":["Object"],"description":""},"bar":{"type":["Object"],"description":""},"stack":{"type":["Object"],"description":""}}},"seriesIndex":{"type":["Object"],"description":"

Series list for each type.

\n","properties":{"line":{"type":["Array"],"description":""},"bar":{"type":["Array"],"description":""}}}}},"brush":{"type":["Object"],"description":"

Brush-selecting icon.

\n

It can also be configured at brush.toolbox.

\n","properties":{"type":{"type":["Array"],"description":"

Icons used, whose values are:

\n
    \n
  • 'rect': Enabling selecting with rectangle area.
    • \n
  • 'polygon': Enabling selecting with any shape.
    • \n
  • 'lineX': Enabling horizontal selecting.
    • \n
  • 'lineY': Enabling vertical selecting.
    • \n
  • 'keep': Switching between single selecting and multiple selecting. The latter one can select multiple areas, while the former one cancels previous selection.
    • \n
  • 'clear': Clearing all selection.
    • \n
\n"},"icon":{"type":["Object"],"description":"

Icon path for each icon.

\n","properties":{"rect":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"polygon":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"lineX":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"lineY":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"keep":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"},"clear":{"type":["string"],"description":"

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
"}}},"title":{"type":["Object"],"description":"

Title.

\n","properties":{"rect":{"type":["string"],"description":"","default":"'Rectangle selection'"},"polygon":{"type":["string"],"description":"","default":"'Polygon selection'"},"lineX":{"type":["string"],"description":"","default":"'Horizontal selection'"},"lineY":{"type":["string"],"description":"","default":"'Vertical selection'"},"keep":{"type":["string"],"description":"","default":"'Keep previous selection'"},"clear":{"type":["string"],"description":"","default":"'Clear selection'"}}}}}}},"iconStyle":{"type":["Object"],"description":"

The style setting of Shared icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under emphasis.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"none"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"#666"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textPosition":{"type":["string"],"description":"

Text position: 'left' / 'right' / 'top' / 'bottom'.

\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"\n\n

Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and '#000'.

\n","uiControl":{"type":"color"},"default":"'#000'"},"textAlign":{"type":["string"],"description":"\n\n

Text align: 'left' / 'center' / 'right'.

\n","uiControl":{"type":"enum","options":"left,center,right"},"default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"\n\n

Text background color.

\n","uiControl":{"type":"color"}},"textBorderRadius":{"type":["number"],"description":"\n\n

Border radius of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"textPadding":{"type":["number"],"description":"\n\n

Padding of text area.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}}}}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between toolbox component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between toolbox component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between toolbox component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between toolbox component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"width":{"type":["string","number"],"description":"

Width of toolbox component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of toolbox component. Adaptive by default.

\n","default":"'auto'"},"tooltip":{"type":["Object"],"description":"

Tooltip configuration for toolbox tooltip, which is similar to tooltip. It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:

\n
option = {\n    tooltip: {\n        show: true // include tooltip component for the feature\n    },\n    toolbox: {\n        show: true,\n        showTitle: false, // hide the default text so they don't overlap each other\n        feature: {\n            saveAsImage: {\n                show: true,\n                title: 'Save As Image'\n            },\n            dataView: {\n                show: true,\n                title: 'Data View'\n            },\n        },\n        tooltip: { // same as option.tooltip\n            show: true,\n            formatter: function (param) {\n                return '<div>' + param.title + '</div>'; // user-defined DOM structure\n            },\n            backgroundColor: '#222',\n            textStyle: {\n                fontSize: 12,\n            },\n            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // user-defined CSS styles\n        }\n    },\n    ...\n}\n
\n"}}},"brush":{"type":["Object"],"description":"

brush is an area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them.

\n


\n
\n

Brush type and triggering button

\n

Currently, supported brush types include: scatter, bar, candlestick. (Note that parallel contains brush function by itself, which is not provided by brush component.)

\n

Click the button in toolbox to enable operations like area selecting, or canceling selecting.

\n


\nExample of horizontal brush: (Click the button in toolbox to enable brushing.)

\n\n\n\n


\nExample of brush in bar charts:

\n\n\n\n\n

Button for brush can be assigned in toolbox or brush configuration.

\n

The following types of brushes are supported: rect, polygon, lineX, lineY. See brush.toolbox for more information.

\n

keep button can be used to toggle a single or multiple selections.

\n
    \n
  • Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.
    • \n
  • Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the clear button.
    • \n
\n


\n
\n

Relationship between brush-selecting and coordinates

\n

brush can be set to be global, or belonging to a particular coordinate.

\n

Global brushes

\n

Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.

\n

Coordinate brushes

\n

Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam and dataZoom).

\n

In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo charts.

\n

By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:

\n
    \n
  • 'all': for all axes;
    • \n
  • number: like 0, for a particular coordinate with that index;
    • \n
  • Array: like [0, 4, 2], for coordinates with those indexes;
    • \n
  • 'none', or null, or undefined: for not assigning.
    • \n
\n

Example:

\n
option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n
\n

Example:

\n
option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n
\n


\n
\n

Control select-box with API

\n

dispatchAction can be used to render select-box programmatically. For example:

\n
myChart.dispatchAction({\n    type: 'brush',\n    areas: [\n        {\n            geoIndex: 0,\n            // Assign select-box type\n            brushType: 'polygon',\n            // Assign select-box shape\n            coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]\n        }\n    ]\n});\n
\n

Please refer to action.brush for more information.

\n


\n
\n

brushLink

\n

Links interaction between selected items in different series.

\n

Following is an example of enabling selected effect for scatter and parallel charts once a scatter chart is selected.

\n

brushLink is an array of seriesIndexes, which assigns the series that can be interacted. For example, it can be:

\n
    \n
  • [3, 4, 5] for interacting series with seriesIndex as 3, 4, or 5;
    • \n
  • 'all' for interacting all series;
    • \n
  • 'none', or null, or undefined for disabling brushLink.
    • \n
\n

Attention

\n

brushLink is a mapping of dataIndex. So data of every series with brushLink should be guaranteed to correspond to the other.

\n

Example:

\n
option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: 'bar'\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: 'parallel',\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n
\n

Please refer to brush.brushLink.

\n


\n
\n

throttle / debounce

\n

By default, brushSelected is always triggered when selection-box is selected or moved, to tell the outside about the event.

\n

But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides brush.throttleType and brush.throttleDelay to solve this problem.

\n

Valid throttleType values can be:

\n
    \n
  • 'debounce': for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with brush.throttleDelay;
    • \n
  • 'fixRate': for triggering event with a certain frequency. The frequency can be assigned with brush.throttleDelay.
    • \n
\n

In this example, debounce is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.

\n


\n
\n

Visual configurations of selected and unselected items

\n

Refer to brush.inBrush and brush.outOfBrush.

\n


\n
\n

Here is the configuration in detail.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"toolbox":{"type":["Array"],"description":"

Use the buttons in toolbox.

\n

Buttons in toolbox that is related to brush includes:

\n
    \n
  • 'rect': for selection-box in rectangle shape;
    • \n
  • 'polygon': for selection-box in polygon shape;
    • \n
  • 'lineX': for horizontal selection-box;
    • \n
  • 'lineY': for vertical selection-box;
    • \n
  • 'keep': for setting mode between single and multiple selection, the former of which supports clearing selection on click, and the latter selecting multiple areas;
    • \n
  • 'clear': for clearing all selections.
    • \n
\n","default":"['rect', 'polygon', 'keep', 'clear']"},"brushLink":{"type":["Array","string"],"description":"

Links interaction between selected items in different series.

\n

Following is an example of enabling selected effect for scatter and parallel charts once a scatter chart is selected.

\n

brushLink is an array of seriesIndexes, which assigns the series that can be interacted. For example, it can be:

\n
    \n
  • [3, 4, 5] for interacting series with seriesIndex as 3, 4, or 5;
    • \n
  • 'all' for interacting all series;
    • \n
  • 'none', or null, or undefined for disabling brushLink.
    • \n
\n

Attention

\n

brushLink is a mapping of dataIndex. So data of every series with brushLink should be guaranteed to correspond to the other.

\n

Example:

\n
option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: 'bar'\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: 'parallel',\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n
\n","default":null},"seriesIndex":{"type":["Array","number","string"],"description":"

Assigns which of the series can use brush selecting, whose value can be:

\n
    \n
  • 'all': all series;
    • \n
  • 'Array': series index array;
    • \n
  • 'number': certain series index.
    • \n
\n","default":"'all'"},"geoIndex":{"type":["Array","number","string"],"description":"

Assigns which of the geo can use brush selecting.

\n

brush can be set to be global, or belonging to a particular coordinate.

\n

Global brushes

\n

Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.

\n

Coordinate brushes

\n

Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam and dataZoom).

\n

In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo charts.

\n

By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:

\n
    \n
  • 'all': for all axes;
    • \n
  • number: like 0, for a particular coordinate with that index;
    • \n
  • Array: like [0, 4, 2], for coordinates with those indexes;
    • \n
  • 'none', or null, or undefined: for not assigning.
    • \n
\n

Example:

\n
option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n
\n

Example:

\n
option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n
\n","default":null},"xAxisIndex":{"type":["Array","number","string"],"description":"

Assigns which of the xAxisIndex can use brush selecting.

\n

brush can be set to be global, or belonging to a particular coordinate.

\n

Global brushes

\n

Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.

\n

Coordinate brushes

\n

Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam and dataZoom).

\n

In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo charts.

\n

By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:

\n
    \n
  • 'all': for all axes;
    • \n
  • number: like 0, for a particular coordinate with that index;
    • \n
  • Array: like [0, 4, 2], for coordinates with those indexes;
    • \n
  • 'none', or null, or undefined: for not assigning.
    • \n
\n

Example:

\n
option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n
\n

Example:

\n
option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n
\n","default":null},"yAxisIndex":{"type":["Array","number","string"],"description":"

Assigns which of the yAxisIndex can use brush selecting.

\n

brush can be set to be global, or belonging to a particular coordinate.

\n

Global brushes

\n

Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.

\n

Coordinate brushes

\n

Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see roam and dataZoom).

\n

In practice, you may often find coordinate brush to be a more frequently made choice, particularly in geo charts.

\n

By assigning brush.geoIndex, or brush.xAxisIndex, or brush.yAxisIndex, brush selecting axes can be assigned, whose value can be:

\n
    \n
  • 'all': for all axes;
    • \n
  • number: like 0, for a particular coordinate with that index;
    • \n
  • Array: like [0, 4, 2], for coordinates with those indexes;
    • \n
  • 'none', or null, or undefined: for not assigning.
    • \n
\n

Example:

\n
option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n
\n

Example:

\n
option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n
\n","default":null},"brushType":{"type":["string"],"description":"

Default type of brush.

\n
    \n
  • 'rect': for selection-box in rectangle shape;
    • \n
  • 'polygon': for selection-box in polygon shape;
    • \n
  • 'lineX': for horizontal selection-box;
    • \n
  • 'lineY': for vertical selection-box;
    • \n
\n","default":"'rect'"},"brushMode":{"type":["string"],"description":"

Default brush mode, whose value can be:

\n
    \n
  • 'single': for single selection;
    • \n
  • 'multiple': for multiple selection.
    • \n
\n","default":"'single'"},"transformable":{"type":["boolean"],"description":"

Determines whether a selected box can be changed in shape or translated.

\n","default":true},"brushStyle":{"type":["Object"],"description":"

Default brush style, whose value is:

\n
{\n    borderWidth: 1,\n    color: 'rgba(120,140,180,0.3)',\n    borderColor: 'rgba(120,140,180,0.8)'\n},\n
\n"},"throttleType":{"type":["string"],"description":"

By default, brushSelected is always triggered when selection-box is selected or moved, to tell the outside about the event.

\n

But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides brush.throttleType and brush.throttleDelay to solve this problem.

\n

Valid throttleType values can be:

\n
    \n
  • 'debounce': for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with brush.throttleDelay;
    • \n
  • 'fixRate': for triggering event with a certain frequency. The frequency can be assigned with brush.throttleDelay.
    • \n
\n

In this example, debounce is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.

\n","default":"'fixRate'"},"throttleDelay":{"type":["number"],"description":"

0 for disabling throttle.

\n

By default, brushSelected is always triggered when selection-box is selected or moved, to tell the outside about the event.

\n

But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides brush.throttleType and brush.throttleDelay to solve this problem.

\n

Valid throttleType values can be:

\n
    \n
  • 'debounce': for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with brush.throttleDelay;
    • \n
  • 'fixRate': for triggering event with a certain frequency. The frequency can be assigned with brush.throttleDelay.
    • \n
\n

In this example, debounce is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.

\n","default":0},"removeOnClick":{"type":["boolean"],"description":"

Defined whether clearing all select-boxes on click is enabled when brush.brushMode is 'single'.

\n","default":true},"inBrush":{"type":["Object"],"description":"

Defines visual effects of items in selection.

\n

Available visual effects include:

\n
    \n
  • symbol: Type of symbol.
    • \n
  • symbolSize: Symbol size.
    • \n
  • color: Symbol color.
    • \n
  • colorAlpha: Symbol alpha channel.
    • \n
  • opacity: Opacity of symbol and others (like labels).
    • \n
  • colorLightness: Lightness in HSL.
    • \n
  • colorSaturation: Saturation in HSL.
    • \n
  • colorHue: Hue in HSL.
    • \n
\n

In most cases, inBrush can be left unassigned, in which case default visual configuration remains.

\n"},"outOfBrush":{"type":["Object"],"description":"

Defines visual effects of items out of selection.

\n

Available visual effects include:

\n
    \n
  • symbol: Type of symbol.
    • \n
  • symbolSize: Symbol size.
    • \n
  • color: Symbol color.
    • \n
  • colorAlpha: Symbol alpha channel.
    • \n
  • opacity: Opacity of symbol and others (like labels).
    • \n
  • colorLightness: Lightness in HSL.
    • \n
  • colorSaturation: Saturation in HSL.
    • \n
  • colorHue: Hue in HSL.
    • \n
\n

Note: If outOfBrush is not assigned, color will be set to be '#ddd' by default. If the color is not desired, you can use:

\n
brush: {\n    ...,\n    outOfBrush: {\n        colorAlpha: 0.1\n    }\n}\n
\n"},"z":{"type":["number"],"description":"

z-index of brush cover box. It can be adjusted when incorrect overlap occurs.

\n","default":10000}}},"geo":{"type":["Object"],"description":"

Geographic coordinate system component.

\n

Geographic coordinate system component is used to draw maps, which also supports scatter series, and line series.

\n

From 3.1.10, geo component also supports mouse events, whose parameters are:

\n
{\n    componentType: 'geo',\n    // geo component's index in option\n    geoIndex: number,\n    // name of clicking area, e.g., Shanghai\n    name: string,\n    // clicking region object as input, see geo.regions\n    region: Object\n}\n
\n

Tip:\nThe region color can also be controlled by map series. See series-map.geoIndex.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"show":{"type":["boolean"],"description":"

Whether to show the geo component.

\n","default":true},"map":{"type":["string"],"description":"

Map name registered in registerMap.

\n

Use geoJSON

\n
$.get('map/china_geo.json', function (chinaJson) {\n    echarts.registerMap('china', {geoJSON: geoJson});\n    var chart = echarts.init(document.getElementById('main'));\n    chart.setOption({\n        geo: [{\n            map: 'china',\n            ...\n        }]\n    });\n});\n
\n

See also geoJSON hexbin.

\n

The demo above shows that ECharts can uses geoJSON format as map outline. You can use third-party geoJSON data (like maps) and register them into ECharts.

\n

Use SVG

\n
$.get('map/topographic_map.svg', function (svg) {\n    echarts.registerMap('topo', {svg: svg});\n    var chart = echarts.init(document.getElementById('main'));\n    chart.setOption({\n        geo: [{\n            map: 'topo',\n            ...\n        }]\n    });\n});\n
\n

See also Flight Seatmap.

\n

The demo above shows that SVG format can be used in ECharts. See more info in SVG Base Map.

\n","default":"''"},"roam":{"type":["boolean","string"],"description":"\n\n

Whether to enable mouse zooming and translating. false by default. If either zooming or translating is wanted, it can be set to 'scale' or 'move'. Otherwise, set it to be true to enable both.

\n","uiControl":{"type":"enum","options":"true,false,scale,move"},"default":false},"projection":{"type":["Object"],"description":"
\n

Since v5.3.0

\n
\n

For custom map projection, at least two methods project, unproject should be provided to calculate the coordinates after projection and before projection respectively.

\n

For example, for the Mercator projection.

\n
series: {\n    type: 'map',\n    projection: {\n        project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],\n        unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]\n    }\n}\n
\n

In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as d3-geo.

\n
const projection = d3.geoConicEqualArea();\n// ...\nseries: {\n    type: 'map',\n    projection: {\n        project: (point) => projection(point),\n        unproject: (point) => projection.invert(point)\n    }\n}\n\n
\n

Note: Custom projections are only useful when using GeoJSON as a data source.

\n","properties":{"project":{"type":["Function"],"description":"
(coord: [number, number]) => [number, number]\n
\n

Projection of latitude and longitude coordinates to other coordinates.

\n"},"unproject":{"type":["Function"],"description":"
(point: [number, number]) => [number, number]\n
\n

Calculate the raw latitude and longitude coordinates from the projected coordinates

\n"},"stream":{"type":["Function"],"description":"

This property is mainly used to adapt the stream interface used in d3-geo. After introducing stream, you can introduce both the Antimeridian Clipping and Adaptive Sampling algorithms implemented in d3-geo.

\n
const projection = d3.geoProjection((x, y) => ([x, y / 0.75]))\n    .rotate([-115, 0]);\n// ...\nseries: {\n    type: 'map',\n    projection: {\n        // We still need project and unproject when stream is provided.\n        project: (point) => projection(point),\n        unproject: (point) => projection.invert(point),\n        // We can directly use the stream method in d3 projection.\n        stream: projection.stream\n    }\n}\n
\n

Note: stream is not required in the projection.

\n"}}},"center":{"type":["Array"],"description":"

Center of current view-port, in longitude and latitude by default. Use the projected coordinates if projection is set.

\n

Example:

\n
center: [115.97, 29.71]\n
\n
projection: {\n    projection: (pt) => project(pt)\n},\ncenter: project([115.97, 29.71])\n
\n"},"aspectScale":{"type":["number"],"description":"

Used to scale aspect of geo. Will be ignored if projection is set.

\n

The final aspect is calculated by: geoBoundingRect.width / geoBoundingRect.height * aspectScale.

\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"

Two dimension array. Define coord of left-top, right-bottom in layout box.

\n
// A complete world map\nmap: 'world',\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n
\n","default":null},"zoom":{"type":["number"],"description":"

Zoom rate of current view-port.

\n","default":1},"scaleLimit":{"type":["Object"],"description":"

Limit of scaling, with min and max.

\n","properties":{"min":{"type":["number"],"description":"

Minimum scaling

\n"},"max":{"type":["number"],"description":"

Maximum scaling

\n"}}},"nameMap":{"type":["Object"],"description":"

Name mapping for customized areas. For example:

\n
{\n    'China' : '中国'\n}\n
\n"},"nameProperty":{"type":["string"],"description":"
\n

Since v4.8.0

\n
\n

customized property key for GeoJSON feature. By default, 'name' is used as primary key to identify GeoJSON feature.\nFor example:

\n
{\n    nameProperty: 'NAME', // key to connect following data point to GeoJSON region {"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}\n    data:[\n        {name: 'Alabama', value: 4822023},\n        {name: 'Alaska', value: 731449},\n    ]\n}\n
\n","default":"'name'"},"selectedMode":{"type":["boolean","string"],"description":"

Selected mode decides whether multiple selecting is supported. By default, false is used for disabling selection. Its value can also be 'single' for selecting single area, or 'multiple' for selecting multiple areas.

\n","default":false},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of Map Area Border, emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"areaColor":{"type":["Color"],"description":"

Area filling color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Map area style in highlighted state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.1.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'self'\n}\n
\n\n\n\n\n\n\n\n\n\n\n\n\n","default":"'none'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"

Map area style in selected state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.1.0

\n
\n

Map area style in blurred state.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"

layoutCenter and layoutSize provides layout strategy other than left/right/top/bottom/width/height.

\n

When using left/right/top/bottom/width/height, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, layoutCenter attribute can be used to define the center position of map, and layoutSize can be used to define the size of map. For example:

\n
layoutCenter: ['30%', '30%'],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n
\n

After setting these two values, left/right/top/bottom/width/height becomes invalid.

\n","default":null},"layoutSize":{"type":["number","string"],"description":"

Size of map, see layoutCenter for more information. Percentage relative to screen width, and absolute pixel values are supported.

\n"},"regions":{"type":["Array"],"description":"

Configure style for specified regions.\nFor example:

\n
regions: [{\n    name: 'Guangdong',\n    itemStyle: {\n        areaColor: 'red',\n        color: 'red'\n    }\n}]\n
\n

The region color can also be controlled by map series. See series-map.geoIndex.

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of area in map, like 'Guangdong', or 'Zhejiang'.

\n"},"selected":{"type":["boolean"],"description":"

Whether this area is selected.

\n","default":false},"itemStyle":{"type":["Object"],"description":"

Item style of this area.

\n","properties":{"areaColor":{"type":["Color"],"description":"

Area color in the map.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"

Style of emphasis region.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"

Style of selected region.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.1.0

\n
\n

Style of blurred region.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.1.0

\n
\n

tooltip settings in this region.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip component.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"silent":{"type":["boolean"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false}}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"tooltip":{"type":["Object"],"description":"
\n

Since v5.1.0

\n
\n

tooltip settings in the coordinate system component.

\n

General Introduction:

\n

tooltip can be configured on different places:

\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip component.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},"parallel":{"type":["Object"],"description":"

Introduction about Parallel coordinates

\n

Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.

\n

For example, series-parallel.data is the following data:

\n
[\n    [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n    [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n    [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n    [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, 'excellent']\n        lineStyle: {...},\n    }\n    ...\n]\n
\n

In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".

\n

Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:

\n\n\n\n\n

Brief about Configuration

\n

Basic configuration parallel coordinates is shown as follow:

\n
option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: 'category',           // Also supports category data.\n            data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: '5%',                     // Location of parallel coordinate system.\n        right: '13%',\n        bottom: '10%',\n        top: '20%',\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: 'value',\n            nameLocation: 'end',\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: 'Beijing',\n            type: 'parallel',           // The type of this series is 'parallel'\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n                [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n                ...\n            ]\n        },\n        {\n            name: 'Shanghai',\n            type: 'parallel',\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n                [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n                ...\n            ]\n        },\n        {\n            name: 'Guangzhou',\n            type: 'parallel',\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n                [5,  42,  24,  44,  0.76,  40,  16, 'excellent'],\n                ...\n            ]\n        }\n    ]\n};\n
\n

Three components are involved here: parallel, parallelAxis, series-parallel

\n
    \n

  • parallel

    \n

    This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.

    \n

    Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.

    \n

    Position setting is also carried out here.

    \n
    • \n

  • parallelAxis

    \n

    This is axis configuration. Multiple axes are needed in parallel coordinates.

    \n

    parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.

    \n
    • \n

  • series-parallel

    \n

    This is the definition of parallel series, which will be drawn on parallel coordinate system.

    \n

    parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.

    \n
    • \n
\n

Notes and Best Practices

\n

When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatedly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.

\n

If data is too large and cause bad performance

\n

It is suggested to set series-parallel.lineStyle.width to be 0.5 (or less), which may improve performance significantly.

\n

Display High-Dimension Data

\n

When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.

\n

In this case, you may use parallel.axisExpandable to improve the display. See this example:

\n\n\n\n\n\n\n\n\n\n\n\n


\n

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between parallel component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":80},"top":{"type":["string","number"],"description":"

Distance between parallel component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":60},"right":{"type":["string","number"],"description":"

Distance between parallel component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":80},"bottom":{"type":["string","number"],"description":"

Distance between parallel component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":60},"width":{"type":["string","number"],"description":"

Width of parallel component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of parallel component. Adaptive by default.

\n","default":"'auto'"},"layout":{"type":["string"],"description":"\n\n

Layout modes, whose optional values are:

\n
    \n

  • 'horizontal': place each axis horizontally.

    \n
    • \n

  • 'vertical': place each axis vertically.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"horizontal,vertical","default":"horizontal"},"default":"'horizontal'"},"axisExpandable":{"type":["boolean"],"description":"\n\n\n\n

When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.

\n

In this case, you may use parallel.axisExpandable to improve the display. See this example:

\n\n\n\n\n\n\n\n

Whether to enable toggling axis on clicking.

\n","uiControl":{"type":"boolean"},"default":false},"axisExpandCenter":{"type":["number"],"description":"\n\n

Index of the axis which is used as the center of expanding initially. It doesn't have a default value, and needs to be assigned manually.

\n

Please refer to parallel.axisExpandable for more information.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":null},"axisExpandCount":{"type":["number"],"description":"\n\n

Defines how many axes are at expanding state initially. We'd suggest you assign this value manually according to dimensions.

\n

Please refer to parallel.axisExpandCenter and parallel.axisExpandable.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":0},"axisExpandWidth":{"type":["number"],"description":"\n\n

Distance between two axes when at expanding state, in pixels.

\n

Please refer to parallel.axisExpandable for more information.

\n","uiControl":{"type":"number","min":"50","step":"1"},"default":50},"axisExpandTriggerOn":{"type":["string"],"description":"\n\n

Optional values:

\n
    \n
  • 'click': Trigger expanding when mouse clicking.
    • \n
  • 'mousemove': Trigger expanding when mouse hovering.
    • \n
\n","uiControl":{"type":"enum","options":"click,mousemove"},"default":"'click'"},"parallelAxisDefault":{"type":["Object"],"description":"

When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatedly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.

\n

See the sample.

\n


\n","properties":{"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via parallelAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"value"},"name":{"type":["string"],"description":"\n\n

Name of axis.

\n","uiControl":{"type":"text"}},"nameLocation":{"type":["string"],"description":"\n\n

Location of axis name.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'middle' or 'center'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,middle,end","default":"end"},"default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"

Text style of axis name.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Color of axis name uses axisLine.lineStyle.color by default.

\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

axis name font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

axis name font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

axis name font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

axis name font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Gap between axis name and axis line.

\n","uiControl":{"type":"number","step":"0.5","default":"15"},"default":15},"nameRotate":{"type":["number"],"description":"\n\n

Rotation of axis name.

\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"},"default":null},"nameTruncate":{"type":["Object"],"description":"

Truncation of the axis name.

\n","properties":{"maxWidth":{"type":["number"],"description":"

The maximum length for the truncated text. Any text exceeding this length will be truncated.

\n"},"ellipsis":{"type":["string"],"description":"

The content displayed at the end of the text after truncation.

\n","default":"'...'"}}},"inverse":{"type":["boolean"],"description":"\n\n

Set this to true to invert the axis.\nThis is a new option available from Echarts 3 and newer.

\n","uiControl":{"type":"boolean"},"default":false},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

The tooltip configuration for parallelAxis, must set triggerEvent as true and enable global option.tooltip component.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip. Defaults to false.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}}}},"parallelAxis":{"type":["Object"],"description":"

This component is the coordinate axis for parallel coordinate.

\n

Introduction about Parallel coordinates

\n

Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.

\n

For example, series-parallel.data is the following data:

\n
[\n    [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n    [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n    [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n    [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, 'excellent']\n        lineStyle: {...},\n    }\n    ...\n]\n
\n

In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".

\n

Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:

\n\n\n\n\n

Brief about Configuration

\n

Basic configuration parallel coordinates is shown as follow:

\n
option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: 'category',           // Also supports category data.\n            data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: '5%',                     // Location of parallel coordinate system.\n        right: '13%',\n        bottom: '10%',\n        top: '20%',\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: 'value',\n            nameLocation: 'end',\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: 'Beijing',\n            type: 'parallel',           // The type of this series is 'parallel'\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n                [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n                ...\n            ]\n        },\n        {\n            name: 'Shanghai',\n            type: 'parallel',\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n                [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n                ...\n            ]\n        },\n        {\n            name: 'Guangzhou',\n            type: 'parallel',\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n                [5,  42,  24,  44,  0.76,  40,  16, 'excellent'],\n                ...\n            ]\n        }\n    ]\n};\n
\n

Three components are involved here: parallel, parallelAxis, series-parallel

\n
    \n

  • parallel

    \n

    This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.

    \n

    Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.

    \n

    Position setting is also carried out here.

    \n
    • \n

  • parallelAxis

    \n

    This is axis configuration. Multiple axes are needed in parallel coordinates.

    \n

    parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.

    \n
    • \n

  • series-parallel

    \n

    This is the definition of parallel series, which will be drawn on parallel coordinate system.

    \n

    parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.

    \n
    • \n
\n

Notes and Best Practices

\n

When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatedly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.

\n

If data is too large and cause bad performance

\n

It is suggested to set series-parallel.lineStyle.width to be 0.5 (or less), which may improve performance significantly.

\n

Display High-Dimension Data

\n

When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.

\n

In this case, you may use parallel.axisExpandable to improve the display. See this example:

\n\n\n\n\n\n\n\n\n\n\n\n


\n

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"dim":{"type":["number"],"description":"

Dimension index of coordinate axis.

\n

For example, series-parallel.data is the following data:

\n
[\n    [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n    [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n    [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n    [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, 'excellent']\n        lineStyle: {...},\n    }\n    ...\n]\n
\n

In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".

\n

dim defines which dimension (which row) of data would map to this axis.

\n

Started from 0. For example, if the dim of coordinate axis is 1, it indicates that the second row of data would map to this axis.

\n"},"parallelIndex":{"type":["number"],"description":"

It is used to define which coordinate the axis should map to.

\n

For example:

\n
myChart.setOption({\n    parallel: [\n        {...},                      // the first parallel coordinate\n        {...}                       // the second parallel coordinate\n    ],\n    parallelAxis: [\n        {parallelIndex: 1, ...},    // the first coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...},    //  the second coordinate axis, mapping to the first parallel coordinate\n        {parallelIndex: 1, ...},    //  the third coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...}     //  the fourth coordinate axis, mapping to the first parallel coordinate\n    ],\n    ...\n});\n
\n

If there is only one parallel coordinate, you don't have to configure it, whose default value is 0.

\n","default":0},"realtime":{"type":["boolean"],"description":"\n\n

Whether to refresh view when brush-selecting axis. If is set to be false, view is updated after brush-selecting action ends.

\n

When data amount is large, it is suggested to set to be false to avoid efficiency problems.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"areaSelectStyle":{"type":["Object"],"description":"

Area selecting is available on axes. Here is some configurations.

\n


\n","properties":{"width":{"type":["number"],"description":"\n\n

Width of selecting box.

\n","uiControl":{"type":"number","min":"0","default":"20","step":"1"},"default":20},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the select box.

\n","uiControl":{"type":"number","min":"0","default":"1","step":"0.5"},"default":1},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the select box.

\n","uiControl":{"type":"color","default":"rgba(160,197,232)"},"default":"'rgba(160,197,232)'"},"color":{"type":["Color"],"description":"\n\n

Border fill color of the select box.

\n","uiControl":{"type":"color","default":"rgba(160,197,232)"},"default":"'rgba(160,197,232)'"},"opacity":{"type":["number"],"description":"\n\n

Opacity of the select box.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.3"},"default":0.3}}},"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via parallelAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"value"},"name":{"type":["string"],"description":"\n\n

Name of axis.

\n","uiControl":{"type":"text"}},"nameLocation":{"type":["string"],"description":"\n\n

Location of axis name.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'middle' or 'center'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,middle,end","default":"end"},"default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"

Text style of axis name.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Color of axis name uses axisLine.lineStyle.color by default.

\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

axis name font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

axis name font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

axis name font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

axis name font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Gap between axis name and axis line.

\n","uiControl":{"type":"number","step":"0.5","default":"15"},"default":15},"nameRotate":{"type":["number"],"description":"\n\n

Rotation of axis name.

\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"},"default":null},"nameTruncate":{"type":["Object"],"description":"

Truncation of the axis name.

\n","properties":{"maxWidth":{"type":["number"],"description":"

The maximum length for the truncated text. Any text exceeding this length will be truncated.

\n"},"ellipsis":{"type":["string"],"description":"

The content displayed at the end of the text after truncation.

\n","default":"'...'"}}},"inverse":{"type":["boolean"],"description":"\n\n

Set this to true to invert the axis.\nThis is a new option available from Echarts 3 and newer.

\n","uiControl":{"type":"boolean"},"default":false},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"tooltip":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

The tooltip configuration for parallelAxis, must set triggerEvent as true and enable global option.tooltip component.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip. Defaults to false.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"singleAxis":{"type":["Object"],"description":"

An axis with a single dimension. It can be used to display data in one dimension. For example:

\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between single component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'5%'"},"top":{"type":["string","number"],"description":"

Distance between single component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'5%'"},"right":{"type":["string","number"],"description":"

Distance between single component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"'5%'"},"bottom":{"type":["string","number"],"description":"

Distance between single component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"'5%'"},"width":{"type":["string","number"],"description":"

Width of single component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of single component. Adaptive by default.

\n","default":"'auto'"},"orient":{"type":["string"],"description":"

Orientation of the axis. By default, it's 'horizontal'. You can set it to be 'vertical' to make a vertical axis.

\n","default":"'horizontal'"},"type":{"type":["string"],"description":"

Type of axis.

\n

Option:

\n
    \n

  • 'value'\n Numerical axis, suitable for continuous data.

    \n
    • \n

  • 'category'\n Category axis, suitable for discrete category data. Category data can be auto retrieved from series.data or dataset.source, or can be specified via singleAxis.data.

    \n
    • \n

  • 'time'\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.

    \n
    • \n

  • 'log'\n Log axis, suitable for log data. Stacked bar or line series with type: 'log' axes may lead to significant visual errors and may have unintended effects in certain circumstances. Their use should be avoided.

    \n
    • \n
\n","default":"'value'"},"name":{"type":["string"],"description":"\n\n

Name of axis.

\n","uiControl":{"type":"text"}},"nameLocation":{"type":["string"],"description":"\n\n

Location of axis name.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'middle' or 'center'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,middle,end","default":"end"},"default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"

Text style of axis name.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Color of axis name uses axisLine.lineStyle.color by default.

\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

axis name font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

axis name font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

axis name font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

axis name font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"nameGap":{"type":["number"],"description":"\n\n

Gap between axis name and axis line.

\n","uiControl":{"type":"number","step":"0.5","default":"15"},"default":15},"nameRotate":{"type":["number"],"description":"\n\n

Rotation of axis name.

\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"},"default":null},"nameTruncate":{"type":["Object"],"description":"

Truncation of the axis name.

\n","properties":{"maxWidth":{"type":["number"],"description":"

The maximum length for the truncated text. Any text exceeding this length will be truncated.

\n"},"ellipsis":{"type":["string"],"description":"

The content displayed at the end of the text after truncation.

\n","default":"'...'"}}},"inverse":{"type":["boolean"],"description":"\n\n

Set this to true to invert the axis.\nThis is a new option available from Echarts 3 and newer.

\n","uiControl":{"type":"boolean"},"default":false},"boundaryGap":{"type":["boolean","Array"],"description":"\n\n

The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.

\n

The boundaryGap of category axis can be set to either true or false. Default value is set to be true, in which case axisTick is served only as a separation line, and labels and data appear only in the center part of two axis ticks, which is called band.

\n

For non-category axis, including time, numerical value, and log axes, boundaryGap is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting min and max.\nExample:

\n
boundaryGap: ['20%', '20%']\n
\n","uiControl":{"type":"boolean"}},"min":{"type":["number","string","Function"],"description":"\n\n

The minimum value of axis.

\n

It can be set to a special value 'dataMin' so that the minimum value on this axis is set to be the minimum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If min is specified as a function, it should return a min value, like:

\n
min: function (value) {\n    return value.min - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the min value of axis, or return null/undefined to make echarts use the auto calculated min value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"max":{"type":["number","string","Function"],"description":"\n\n

The maximum value of axis.

\n

It can be set to a special value 'dataMax' so that the minimum value on this axis is set to be the maximum label.

\n

It will be automatically computed to make sure axis tick is equally distributed when not set.

\n

In category axis, it can also be set as the ordinal number. For example, if a catergory axis has data: ['categoryA', 'categoryB', 'categoryC'], and the ordinal 2 represents 'categoryC'. Moreover, it can be set as negative number, like -3.

\n

If max is specified as a function, it should return a max value, like:

\n
max: function (value) {\n    return value.max - 20;\n}\n
\n

value is an object, containing the min value and max value of the data. This function should return the max value of axis, or return null/undefined to make echarts use the auto calculated max value (null/undefined return is only supported since v4.8.0).

\n","uiControl":{"type":"number"},"default":null},"scale":{"type":["boolean"],"description":"\n\n

It is available only in numerical axis, i.e., type: 'value'.

\n

It specifies whether not to contain zero position of axis compulsively. When it is set to be true, the axis may not contain zero position, which is useful in the scatter chart for both value axes.

\n

This configuration item is unavailable when the min and max are set.

\n","uiControl":{"type":"boolean"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.

\n

This is unavailable for category axis.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"minInterval":{"type":["number"],"description":"\n\n

Minimum gap between split lines.

\n

For example, it can be set to be 1 to make sure axis label is show as integer.

\n
{\n    minInterval: 1\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"},"default":0},"maxInterval":{"type":["number"],"description":"\n\n

Maximum gap between split lines.

\n

For example, in time axis (type is 'time'), it can be set to be 3600 * 24 * 1000 to make sure that the gap between axis labels is less than or equal to one day.

\n
{\n    maxInterval: 3600 * 1000 * 24\n}\n
\n

It is available only for axis of type 'value' or 'time'.

\n","uiControl":{"type":"number"}},"interval":{"type":["number"],"description":"\n\n

Compulsively set segmentation interval for axis.

\n

As splitNumber is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with min and max to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.

\n

This is unavailable for 'category' and 'time' axes. Logged value should be passed for type: 'log' axis.

\n","uiControl":{"type":"number"}},"logBase":{"type":["number"],"description":"\n\n

Base of logarithm, which is valid only for numeric axes with type: 'log'.

\n","uiControl":{"type":"number","default":"10"},"default":10},"startValue":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.1

\n
\n

To specify the start value of the axis.

\n","uiControl":{"type":"number"}},"silent":{"type":["boolean"],"description":"

Set this to true, to prevent interaction with the axis.

\n","default":false},"triggerEvent":{"type":["boolean"],"description":"

Set this to true to enable triggering events.

\n

Parameters of the event include:

\n
{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: '',\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: ''\n}\n
\n","default":false},"axisLine":{"type":["Object"],"description":"

Settings related to axis line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis line from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Array"],"description":"\n\n

Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be 'none' by default, meaning no arrow for either end. If it is set to be 'arrow', there shall be two arrows. If there should only one arrow at the end, it should set to be ['none', 'arrow'].

\n","uiControl":{"type":"icon","default":"none"},"default":"'none'"},"symbolSize":{"type":["Array"],"description":"\n\n

Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.

\n","uiControl":{"type":"vector","default":"10,15"},"default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"\n\n

Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.

\n","uiControl":{"type":"vector","default":"0,0"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

line styleLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#333'"},"width":{"type":["number"],"description":"\n\n

line style line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

Settings related to axis tick.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis tick from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"alignWithLabel":{"type":["boolean"],"description":"\n\n

Align axis tick with label, which is available only when boundaryGap is set to be true in category axis. See the following picture:

\n

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of axisTick, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"length":{"type":["number"],"description":"\n\n

The length of the axis tick.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"5"},"default":5},"lineStyle":{"type":["Object"],"description":"

Line style of axis ticks.

\n","properties":{"color":{"type":["Color"],"description":"

Color of axis label is set to be axisLine.lineStyle.color by default.

\n"},"width":{"type":["number"],"description":"\n\n

axisTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize tick positions. For example,

\n
axisTick: {\n    alignWithLabel: true,\n    customValues: [0, 0.5, 1, 1.5, 2, 8, 9]\n}\n
\n

\n"}}},"minorTick":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Settings related minor ticks.

\n

Note: minorTick is not available in the category type axis.

\n

Examples:

\n

1) Using minor ticks in function plotting.

\n\n\n\n

2) Using minor ticks in log axis.

\n\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor ticks.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"splitNumber":{"type":["number"],"description":"\n\n

Number of interval splited by minor ticks.

\n","uiControl":{"type":"number","min":"1","step":"1","default":"5"},"default":5},"length":{"type":["number"],"description":"\n\n

Length of minor ticks lines。

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"3"},"default":3},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Style configuration of minor ticks lines axisLine.lineStyle.color。

\n","uiControl":{"type":"color"}},"width":{"type":["number"],"description":"\n\n

minorTick line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Settings related to axis label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the axis label from appearing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis label, which is available in category axis.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"inside":{"type":["boolean"],"description":"\n\n

Set this to true so the axis labels face the inside direction.

\n","uiControl":{"type":"boolean"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotation degree of axis label, which is especially useful when there is no enough space for category axis.

\n

Rotation degree is from -90 to 90.

\n","uiControl":{"type":"angle","min":"-90","max":"90","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the axis label and the axis line.

\n","uiControl":{"type":"number","default":"8","step":"0.5"},"default":8},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"showMinLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the min tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"showMaxLabel":{"type":["boolean"],"description":"\n\n

Whether to show the label of the max tick. Optional values: true, false, null. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.

\n","uiControl":{"type":"boolean"},"default":null},"hideOverlap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

Whether to hide overlapped labels.

\n","uiControl":{"type":"boolean"}},"customValues":{"type":["Array"],"description":"
\n

Since v5.5.1

\n
\n

To customize label positions. For example,

\n
axisLabel: {\n    customValues: [0, 4, 7, 8, 9]\n}\n
\n

\n"},"color":{"type":["Color","Function"],"description":"\n\n

Color of axis label is set to be axisLine.lineStyle.color by default. Callback function is supported, in the following format:

\n
(val: string) => Color\n
\n

Parameter is the text of label, and return value is the color. See the following example:

\n
textStyle: {\n    color: function (value, index) {\n        return value >= 0 ? 'green' : 'red';\n    }\n}\n
\n","uiControl":{"type":"color"}},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"splitLine":{"type":["Object"],"description":"

Split line of axis in grid area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing.\nvalue type axes are shown by default, while category type axes are hidden.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showMinLine":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the min tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"showMaxLabel":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to show the splitLine of the max tick. Defaults to true.

\n","uiControl":{"type":"boolean"},"default":true},"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitLine, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"\n\n

The color of the splitLine, which could be set separately.

\n

SplitLine color could also be set in color array, which the split lines would take as their colors in turns.

\n

Example:

\n
splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: ['#aaa', '#ddd']\n    }\n}\n
","uiControl":{"type":"color"},"default":"['#ccc']"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"minorSplitLine":{"type":["Object"],"description":"
\n

Since v4.6.0

\n
\n

Minor split lines of axis in the grid area。It will align to the minorTick

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

If show minor split lines.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

minorSplitLineLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#eee'"},"width":{"type":["number"],"description":"\n\n

minorSplitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitArea":{"type":["Object"],"description":"

Split area of axis in grid area, not shown by default.

\n","properties":{"interval":{"type":["number","Function"],"description":"\n\n\n\n

Interval of Axis splitArea, which is available in category axis. is set to be the same as axisLabel.interval by default.

\n

It uses a strategy that labels do not overlap by default.

\n

You may set it to be 0 to display all labels compulsively.

\n

If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.

\n

On the other hand, you can control by callback function, whose format is shown below:

\n
(index:number, value: string) => boolean\n
\n

The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"'auto'"},"show":{"type":["boolean"],"description":"\n\n

Set this to true to show the splitArea.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"areaStyle":{"type":["Object"],"description":"

Split area style.

\n","properties":{"color":{"type":["Array"],"description":"

Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.

\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Category data, available in type: 'category' axis.

\n

If type is not specified, but axis.data is specified, the type is auto set as 'category'.

\n

If type is specified as 'category', but axis.data is not specified, axis.data will be auto collected from series.data. It brings convenience, but we should notice that axis.data provides then value range of the 'category' axis. If it is auto collected from series.data, Only the values appearing in series.data can be collected. For example, if series.data is empty, nothing will be collected.

\n

Example:

\n
// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: 'Monday',\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: 'red'\n    }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n
\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"

Name of a category.

\n"},"textStyle":{"type":["Object"],"description":"

Text style of the category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"

axisPointer settings on the axis.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

axisPointer will not be displayed by default. But if tooltip.trigger is set as 'axis' or tooltip.axisPointer.type is set as 'cross', axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. tooltip.axisPointer.axis can be used to change the choice.

\n","uiControl":{"type":"boolean"},"default":false},"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"line,shadow,none"},"default":"'line'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"triggerEmphasis":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.4.3

\n
\n

Whether to trigger emphasis of series.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerTooltip":{"type":["boolean"],"description":"\n\n

Whether to trigger tooltip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"value":{"type":["number"],"description":"

current value. When using axisPointer.handle, value can be set to define the initial position of axisPointer.

\n","default":null},"status":{"type":["boolean"],"description":"\n\n

Current status, can be 'show' or 'hide'.

\n","uiControl":{"type":"enum","options":"show,hide"}},"handle":{"type":["Object"],"description":"

A button used to drag axisPointer. This feature is applicable in touch device. See example.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set to true to use handle.

\n","uiControl":{"type":"boolean"},"default":false},"icon":{"type":["*"],"description":"\n\n

The icon of the handle.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

See the example of using image

\n","uiControl":{"type":"icon","clean":"true"}},"size":{"type":["number","Array"],"description":"\n\n

The size of the handle, which can be set as a single value or an array ([width, height]).

\n","uiControl":{"type":"vector","default":"45,45","min":"0","step":"0.5","dims":"width,height"},"default":45},"margin":{"type":["number"],"description":"\n\n

Distance from handle center to axis.

\n","uiControl":{"type":"number","default":"50","min":"0","step":"0.5"},"default":50},"color":{"type":["string"],"description":"\n\n

The color of the handle.

\n","uiControl":{"type":"color"},"default":"'#333'"},"throttle":{"type":["number"],"description":"\n\n

Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.

\n","uiControl":{"type":"number","default":"40","min":"0","step":"10"},"default":40},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"2","step":"0.5"},"default":2},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in the coordinate system component.

\n

General Introduction:

\n

tooltip can be configured on different places:

\n\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the tooltip component.

\n

including tooltip floating layer and axisPointer.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"trigger":{"type":["string"],"description":"\n\n

Type of triggering.

\n

Options:

\n
    \n

  • 'item'

    \n

    Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.

    \n
    • \n

  • 'axis'

    \n

    Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.

    \n

    ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in grid or polar. Also, you may assign axis with axisPointer.axis.

    \n
    • \n

  • 'none'

    \n

    Trigger nothing.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"item,axis,none","default":"item"},"default":"'item'"},"axisPointer":{"type":["Object"],"description":"

Configuration item for axisPointer.

\n

tooltip.axisPointer is like syntactic sugar of axisPointer settings on axes (for example, xAxis.axisPointer or angleAxis.axisPointer). More detailed features can be configured on someAxis.axisPointer. But in common cases, using tooltip.axisPointer is more convenient.

\n
\n

Notice: configurations of tooltip.axisPointer has lower priority than that of someAxis.axisPointer.

\n
\n
\n

axisPointer is a tool for displaying reference line and axis value under mouse pointer.

\n

For example:

\n\n\n\n

In the demo above, axisPointer.link is used to link axisPointer from different coordinate systems.

\n

axisPointer can also be used on touch device, where user can drag the button to move the reference line and label.

\n\n\n\n

In the cases that more than one axis exist, axisPointer helps to look inside the data.

\n\n\n\n\n\n\n
\n
\n

Notice:\nGenerally, axisPointers is configured in each axes who need them (for example xAxis.axisPointer), or configured in tooltip (for example tooltip.axisPointer).

\n
\n
\n

But these configurations can only be configured in global axisPointer:\naxisPointer.triggerOn, axisPointer.link.

\n
\n
\n
\n

How to display axisPointer:

\n

In cartesian (grid) and polar](~polar) and (single axis, each axis has its own axisPointer.

\n

Those axisPointer will not be displayed by default, utill configured as follows:

\n
    \n

  • Set someAxis.axisPointer.show (like xAxis.axisPointer.show) as true. Then axisPointer of this axis will be displayed.

    \n
    • \n

  • Set tooltip.trigger as 'axis', or set tooltip.axisPointer.type as 'cross'. Then coordinate system will automatically chose the axes who will display their axisPointers. (tooltip.axisPointer.axis can be used to change the choice.) Notice, axis.axisPointer will override tooltip.axisPointer settings.

    \n
    • \n
\n
\n

How to display the label of axisPointer:

\n

The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:

\n\n
\n

How to configure axisPointer on touch device:

\n

Set someAxis.axisPointer.handle.show (for example xAxis.axisPointer.handle.show as true. Then the button for dragging will be displayed. (This feature is not supported on polar).

\n

Notice:\nIf tooltip does not work well in this case, try to settooltip.triggerOn as 'none' (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set tooltip.alwaysShowContent as true (then tooltip will always be displayed).

\n

See the example.

\n
\n

Snap to point

\n

In value axis and time axis, if snap is set as true, axisPointer will snap to point automatically.

\n
\n","properties":{"type":{"type":["string"],"description":"\n\n

Indicator type.

\n

Options:

\n
    \n

  • 'line' line indicator.

    \n
    • \n

  • 'shadow' shadow crosshair indicator.

    \n
    • \n

  • 'none' no indicator displayed.

    \n
    • \n

  • 'cross' crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"none,line,shadow,cross","default":"line"},"default":"'line'"},"axis":{"type":["string"],"description":"

The coordinate axis, which could be 'x', 'y', 'radius', or 'angle'. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).

\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"

Whether snap to point automatically. The default value is auto determined.

\n

This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.

\n"},"z":{"type":["number"],"description":"

z value, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n"},"label":{"type":["Object"],"description":"

label of axisPointer

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label. Label will not show by default. But if tooltip.axisPointer.type is set as 'cross', label will be displayed automatically.

\n","default":false},"precision":{"type":["number","string"],"description":"

The precision of value in label. It is auto determined by default. You can also set it as '2', which indicates that two decimal fractions are reserved.

\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"

The formatter of label.

\n

If set as string, for example it can be: formatter: 'some text {value} some text, where {value} will be replaced by axis value automatically.

\n

If set as function:

\n

Parameters:

\n

{Object} params: Including fields as follows:

\n

{Object} params.value: current value of this axis. If axis.type is 'category', it is one of the value in axis.data. If axis.type is 'time', it is a timestamp.

\n

{Array.<Object>} params.seriesData: An array, containing info of nearest points. Each item is:

\n

{string} params.axisDimension: The dimension name of the axis. For example, in catesian it will be 'x', 'y', and in polar it will be 'radius', 'angle'.

\n

{number} params.axisIndex: The index of the axis, for example, 0,1, 2, ...

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Each item also includes axis information:

\n
{\n    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n    axisId: 'xxx',\n    axisName: 'xxx',\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: 'text of value'\n}\n
\n

Return:

\n

The string to be displayed.

\n

For example:

\n
formatter: function (params) {\n    // If axis.type is 'time'\n    return 'some text' + echarts.format.formatTime(params.value);\n}\n
\n","default":null},"margin":{"type":["number"],"description":"

Distance between label and axis.

\n","default":3},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"padding":{"type":["string","Array"],"description":"\n\n

axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"

Background color of label, the same as axis.axisLine.lineStyle.color by default.

\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"

Border color of label.

\n","default":null},"borderWidth":{"type":["string"],"description":"

Border width of label.

\n","default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"3","min":"0","step":"0.5"},"default":3},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"#aaa"},"default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'line'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"shadowStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'shadow'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"crossStyle":{"type":["Object"],"description":"

It is valid when axisPointer.type is 'cross'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#555"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"dashed"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":200},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"position":{"type":["string","Array"],"description":"

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n\n\n\n\n\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n\n\n\n\n\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"timeline":{"type":["Object"],"description":"

timeline component, which provides functions like switching and playing between multiple ECharts options.

\n

Here is an example:

\n\n\n\n

Different from other cases, timeline component requires multiple options. We call first the parameter of setOption as ECOption, and call the traditional single ECharts option as ECUnitOption.

\n
    \n
  • In the case that timeline and media query are not set, an ECUnitOption is an ECOption.
    • \n
  • In the case that timeline or media query are set, an ECOption is made up with several ECUnitOptions.
      \n
    • The properties at the root of ECOption form an ECUnitOption, which is also called baseOption, representing the default settings.
      • \n
    • Each item of the array options form an ECUnitOption, which can be also called switchableOption, representing options for each time tick.
      • \n
    \n
    • \n
  • baseOption and one switchableOption are used to calculate the finalOption, based on which the chart will be final rendered.
    • \n
\n

For example:

\n
myChart.setOption({\n    // This is the properties of `baseOption`.\n    timeline: {\n        ...,\n        // each item in `timeline.data` corresponds to each\n        // `option` in `options` array.\n        data: ['2002-01-01', '2003-01-01', '2004-01-01']\n    },\n    title: {\n        subtext: ' Data is from National Bureau of Statistics '\n    },\n    grid: { ... },\n    xAxis: [ ... ],\n    yAxis: [ ... ],\n    series: [{\n        // other configurations of series 1\n        type: 'bar',\n        ...\n    }, {\n        // other configurations of series 2\n        type: 'line',\n        ...\n    }, {\n        // other configurations of series 3\n        type: 'pie',\n        ...\n    }],\n    // `switchableOption`s:\n    options: [{\n        // it is an option corresponding to '2002-01-01'\n        title: {\n        text: 'the statistics of the year 2002'\n        },\n        series: [\n            { data: [] }, // the data of series 1\n            { data: [] }, // the data of series 2\n            { data: [] }  // the data of series 3\n        ]\n    }, {\n        // it is an option corresponding to '2003-01-01'\n        title: {\n            text: 'the statistics of the year 2003'\n        },\n        series: [\n            { data: [] },\n            { data: [] },\n            { data: [] }\n        ]\n    }, {\n        // it is an option corresponding to '2004-01-01'\n        title: {\n            text: 'the statistics of the year 2004'\n        },\n        series: [\n            { data: [] },\n            { data: [] },\n            { data: [] }\n        ]\n    }]\n});\n
\n


\nHow the finalOption calculated?

\n

When initializing, a switchableOption corresponding to the current time tick are merged into baseOption to form the finalOption. Each time the current tick changed, the new switchableOption corresponding to the new time tick are merged into the finalOption.

\n

There are two merging strategy.

\n\n


\nCompatibility with ECharts 4:

\n

We also support these equivalent setting styles:

\n
option = {\n    baseOption: {\n        timeline: {},\n        series: [],\n        // ... other properties of baseOption.\n    },\n    options: []\n};\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the timeline component. It would not show with a setting of false, but its functions still remain.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"type":{"type":["string"],"description":"

This attribute has only one valid value as slider by now. You don't have to change it.

\n","default":"'slider'"},"axisType":{"type":["string"],"description":"

Type of axis, whose values may be:

\n
    \n
  • 'value'\n Numeric axis, which is suitable for continuous data.
    • \n
  • 'category'\n Category axis, which is suitable for category data.
    • \n
  • 'time'\n Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.
    • \n
\n","default":"'time'"},"currentIndex":{"type":["number"],"description":"\n\n

Indicates which is the currently selected item. For instance, if currentIndex is 0, it indicates that the currently selected item is timeline.data[0] (namely, using options[0]).

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":0},"autoPlay":{"type":["boolean"],"description":"\n\n

Whether to play automatically.

\n","uiControl":{"type":"boolean"},"default":false},"rewind":{"type":["boolean"],"description":"\n\n

Whether supports playing reversely.

\n","uiControl":{"type":"boolean"},"default":false},"loop":{"type":["boolean"],"description":"\n\n

Whether to loop playing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"playInterval":{"type":["number"],"description":"\n\n

Indicates play speed (gap time between two state), whose unit is millisecond.

\n","uiControl":{"type":"number","min":"0","step":"20","default":"2000"},"default":2000},"realtime":{"type":["boolean"],"description":"\n\n

Whether the view updates in real time during dragging the control dot.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"replaceMerge":{"type":["Array","string"],"description":"

When initializing, a switchableOption corresponding to the current time tick are merged into baseOption to form the finalOption. Each time the current tick changed, the new switchableOption corresponding to the new time tick are merged into the finalOption.

\n

There are two merging strategy.

\n\n


\n

The value of replaceMerge can be a mainType of a component, like replaceMerge: 'xAxis', or an array of mainTypes, like replaceMerge: ['xAxis', 'series'].

\n

replaceMerge is usually used in this scenario: if users intending to replace all of the current series with the new series corresponding to the next time tick without any merging, users can set: replaceMerge: 'series', and make sure that the series are in different id or no id.

\n

See this example.

\n","default":"undefined"},"controlPosition":{"type":["string"],"description":"\n\n

Position of the play button, whose valid values are 'left' and 'right'.

\n","uiControl":{"type":"enum","options":"left,right"},"default":"'left'"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between timeline component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between timeline component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between timeline component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between timeline component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"padding":{"type":["number","Array"],"description":"\n\n\n\n\n\n

timeline space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"orient":{"type":["string"],"description":"\n\n

Orientation of the component, whose valid values are:

\n
    \n
  • 'vertical': vertical layout.
    • \n
  • 'horizontal': horizontal layout.
    • \n
\n","uiControl":{"type":"enum","options":"horizontal,vertical","default":"horizontal"},"default":"'horizontal'"},"inverse":{"type":["boolean"],"description":"\n\n
    \n
  • Whether to put the timeline component reversely, which makes the elements in the front to be at the end.
    • \n
\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string"],"description":"\n\n

Symbol of timeline.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"},"default":"'emptyCircle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

timeline symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"},"default":10},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of timeline symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of timeline symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the axis. It can be set to be false to hide the axis line to make a different style.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"color":{"type":["Color"],"description":"\n\n

timeline Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#DAE1F5'"},"width":{"type":["number"],"description":"\n\n

timeline line width.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label axis, emphasis is the highlighted style of text. For instance, text style in emphasis would be used when mouse hovers or legend connects.

\n","properties":{"position":{"type":["string","number"],"description":"\n\n\n\n

Configurations:

\n
    \n

  • 'auto':\n Automatic layout.

    \n
    • \n

  • 'left':\n Put it along the left margin.\n It is valid when timline.orient is set as 'horizontal' .

    \n
    • \n

  • 'right':\n Put it along the right margin.\n It is valid when timline.orient is set as 'horizontal'.

    \n
    • \n

  • 'top':\n Put it along the margin of the top.\n It is valid when timline.orient is set as 'vertical'.

    \n
    • \n

  • 'bottom':\n Put it along the margin of the bottom.\n It is valid when timline.orient is set as 'vertical'.

    \n
    • \n

  • number:\n When it is assigned to be a a number value, it indicates the distance between label and axis. If it is set to be 0 , label would be at the same position with axis. Negative value is valid for the other side of the axis.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"auto,left,right,top,bottom"},"default":"'auto'"},"show":{"type":["boolean"],"description":"\n\n

Whether to show the label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["string","number"],"description":"

Interval of label. When it is assigned with a numerical value, such as 2, a label would show every 2 items.

\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"

Rotation angle of label, in which positive values refer to counter clockwise rotation.

\n","default":0},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

timeline.lable text color.

\n","uiControl":{"type":"color","default":"'#A4B1D7'"},"default":"'#A4B1D7'"},"fontStyle":{"type":["string"],"description":"\n\n

timeline.lable font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

timeline.lable font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

timeline.lable font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

timeline.lable font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of timeline , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

timeline color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#A4B1D7'"},"borderColor":{"type":["Color"],"description":"\n\n

timeline border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

timeline border width. No border when it is set to be 0.

\n

timeline border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

timeline border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"checkpointStyle":{"type":["Object"],"description":"

Style of the selected item (checkpoint).

\n","properties":{"symbol":{"type":["string"],"description":"\n\n

Symbol of timeline.checkpointStyle .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

timeline.checkpointStyle symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"},"default":13},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of timeline.checkpointStyle symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of timeline.checkpointStyle symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#316bf3'"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#fff'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"2","min":"0","step":"0.5"},"default":2},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"'rgba(0, 0, 0, 0.3)'"},"default":"'rgba(0, 0, 0, 0.3)'"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"1","step":"0.5"},"default":1},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"1","step":"0.5"},"default":1},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"animation":{"type":["boolean"],"description":"\n\n

In timeline component, whether there is animation in checkpoint moving during the process of timeline playing and switching.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"animationDuration":{"type":["number"],"description":"\n\n

The animation duration of checkpoint in timeline component.

\n","uiControl":{"type":"number","min":"0","step":"20","default":"300"},"default":300},"animationEasing":{"type":["string"],"description":"\n\n

The easing effect of animation of checkpoint in timeline component. Refers to easing sample for different easing effects.

\n","uiControl":{"type":"enum","default":"quinticInOut","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'quinticInOut'"}}},"controlStyle":{"type":["Object"],"description":"

The style of control button, which includes: play button, previous button, and next button.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show control button. false for hide all.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showPlayBtn":{"type":["boolean"],"description":"\n\n

Whether to show play button.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showPrevBtn":{"type":["boolean"],"description":"\n\n

Whether to show previous button.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showNextBtn":{"type":["boolean"],"description":"\n\n

Whether to show next button.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"itemSize":{"type":["number"],"description":"\n\n

Size of control button, in pixels (px).

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"22"},"default":22},"itemGap":{"type":["number"],"description":"\n\n

Interval between control button, in pixels (px).

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"12"},"default":12},"position":{"type":["string"],"description":"\n\n

the location of control button.

\n
    \n

  • When timeline.orient is set to be 'horizontal', 'left' and 'right'are valid.

    \n
    • \n

  • When timeline.orient is set to be 'vertical', 'top' and 'bottom'are valid.

    \n
    • \n
\n","uiControl":{"type":"enum","options":"left,right,top,bottom"},"default":"'left'"},"playIcon":{"type":["string"],"description":"\n\n

Icon of play status for play button.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"stopIcon":{"type":["string"],"description":"\n\n

Icon of stop status for play button.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"prevIcon":{"type":["string"],"description":"\n\n

Icon of previous button.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"nextIcon":{"type":["string"],"description":"\n\n

Icon of next button.

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon"}},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#A4B1D7'"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#A4B1D7'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"progress":{"type":["Object"],"description":"

Styles of line, labels and symbols in progress.

\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#316BF3'"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#316BF3'"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["string","number"],"description":"

Interval of label. When it is assigned with a numerical value, such as 2, a label would show every 2 items.

\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"

Rotation angle of label, in which positive values refer to counter clockwise rotation.

\n","default":0},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

timeline.lable text color.

\n","uiControl":{"type":"color","default":"'#6f778d'"},"default":"'#6f778d'"},"fontStyle":{"type":["string"],"description":"\n\n

timeline.lable font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

timeline.lable font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

timeline.lable font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

timeline.lable font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"interval":{"type":["string","number"],"description":"

Interval of label. When it is assigned with a numerical value, such as 2, a label would show every 2 items.

\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"

Rotation angle of label, in which positive values refer to counter clockwise rotation.

\n","default":0},"formatter":{"type":["string","Function"],"description":"

Formatter of axis label, which supports string template and callback function.

\n

Example:

\n
// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n// Use callback.\nformatter: function (value, index) {\n    return value + 'kg';\n}\n
\n
\n

For axes of time type: 'time', formatter supports the following forms:

\n
    \n
  • String Templates: an easy and fast way to make frequently used date/time template, formed in string
    • \n
  • Callback Functions: customized formatter to make complex format, formed in Function
    • \n
  • Cascading Templates: to adopt different formatters for different time granularity, formed in object
    • \n
\n

Next, we are going to introduce these three forms one by one.

\n

String Templates

\n

Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GroupTemplateValue (EN)Value (ZH)
Year{yyyy}e.g. 2020, 2021, ...例：2020, 2021, ...
{yy}00-9900-99
Quarter{Q}1, 2, 3, 41, 2, 3, 4
Month{MMMM}e.g. January, February, ...一月、二月、……
{MMM}e.g. Jan, Feb, ...1月、2月、……
{MM}01-1201-12
{M}1-121-12
Day of Month{dd}01-3101-31
{d}1-311-31
Day of Week{eeee}Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday星期日、星期一、星期二、星期三、星期四、星期五、星期六
{ee}Sun, Mon, Tues, Wed, Thu, Fri, Sat日、一、二、三、四、五、六
{e}1-541-54
Hour{HH}00-2300-23
{H}0-230-23
{hh}01-1201-12
{h}1-121-12
Minute{mm}00-5900-59
{m}0-590-59
Second{ss}00-5900-59
{s}0-590-59
Millisecond{SSS}000-999000-999
{S}0-9990-999
Meridian{A}AM, PM (Since v5.5.1, i18n will be finished in the next version)上午、下午 (v5.5.1 仅支持英文，将在下个版本支持中文及其他语言)
{a}am, pm上午、下午
\n
\n

Templates of other languages can be found in the language package. Please refer to echarts.registerLocale to register a language.

\n
\n

Example:

\n
formatter: '{yyyy}-{MM}-{dd}' // gets labels like '2020-12-02'\nformatter: 'Day {d}' // gets labels like 'Day 2'\n
\n

Callback Functions

\n

Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like Moment.js or date-fns can be used to return formatted labels.

\n

Example:

\n
// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getFullYear());\n    }\n    return texts.join('/');\n}\n
\n

Cascading Templates

\n

Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:

\n

Example:

\n
formatter: {\n    month: '{MMMM}', // Jan, Feb, ...\n    day: '{d}' // 1, 2, ...\n}\n
\n

Supported levels and their default formatters are:

\n
{\n    year: '{yyyy}',\n    month: '{MMM}',\n    day: '{d}',\n    hour: '{HH}:{mm}',\n    minute: '{HH}:{mm}',\n    second: '{HH}:{mm}:{ss}',\n    millisecond: '{hh}:{mm}:{ss} {SSS}',\n    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'\n}\n
\n

Let's take day for example. When a tick value is 0 for its hour, minute, second, and millisecond, day level will be used to make formatter. none is used when no other level fulfills, which is for tick values with millisecond values other than 0.

\n

Rich Text

\n

The above three forms all support rich text, so it can be used to make some complex effects.

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n            month: '{monthStyle|{MMM}}'\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            monthStyle: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n

The above example can also be made with a callback function:

\n

Example:

\n
xAxis: {\n    type: 'time',\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return '{year|' + date.getFullYear() + '}\\n'\n                    + '{month|' + (date.getMonth() + 1) + '月}';\n            }\n            else {\n                return '{month|' + (date.getMonth() + 1) + '月}'\n            }\n        },\n        rich: {\n            year: {\n                color: '#000',\n                fontWeight: 'bold'\n            },\n            month: {\n                color: '#999'\n            }\n        }\n    }\n},\n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

timeline.lable.emphasis text color.

\n","uiControl":{"type":"color","default":"'#6f778d'"},"default":"'#6f778d'"},"fontStyle":{"type":["string"],"description":"\n\n

timeline.lable.emphasis font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

timeline.lable.emphasis font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

timeline.lable.emphasis font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

timeline.lable.emphasis font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

timeline color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#316BF3'"},"borderColor":{"type":["Color"],"description":"\n\n

timeline border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

timeline border width. No border when it is set to be 0.

\n

timeline border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

timeline border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"checkpointStyle":{"type":["Object"],"description":"

Style of the checkpoint.

\n"},"controlStyle":{"type":["Object"],"description":"

Style of the control button.

\n"}}},"data":{"type":["Array"],"description":"

timeline data. Each item of Array can be a instant value. If you need to set style individually for a data item, the data item should be written as Object. In then Object, the attribute of value is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in timeline.

\n

as follows:

\n
[\n    '2002-01-01',\n    '2003-01-01',\n    '2004-01-01',\n    {\n        value: '2005-01-01',\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: '{b} xxxx'\n        },\n        symbol: 'diamond',  // the special setting of this item's symbol.\n        symbolSize: 16      // the special setting of this item's size.\n    },\n    '2006-01-01',\n    '2007-01-01',\n    '2008-01-01',\n    '2009-01-01',\n    '2010-01-01',\n    {\n        value: '2011-01-01',\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: function (params) {\n                return params.name + 'xxxx';\n            }\n        },\n        symbol: 'diamond',\n        symbolSize: 18\n    },\n]\n
\n"}}},"graphic":{"type":["*"],"description":"

graphic component enables creating graphic elements in ECharts.

\n

Those graphic type are supported.

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n

This example shows how to make a watermark and text block:

\n\n\n\n

This example use hidden graphic elements to implement dragging:

\n\n\n\n

Graphic Component Configuration

\n

A simple way to define a graphic element:

\n
myChart.setOption({\n    ...,\n    graphic: {\n        type: 'image',\n        ...\n    }\n});\n
\n

Define multiple graphic elements:

\n
myChart.setOption({\n    ...,\n    graphic: [\n        { // A 'image' element.\n            type: 'image',\n            ...\n        },\n        { // A 'text' element, with id specified.\n            type: 'text',\n            id: 'text1',\n            ...\n        },\n        { // A 'group' element, in which children can be defined.\n            type: 'group',\n            children: [\n                {\n                    type: 'rect',\n                    id: 'rect1',\n                    ...\n                },\n                {\n                    type: 'image',\n                    ...\n                },\n                ...\n            ]\n        }\n        ...\n    ]\n});\n\n
\n

How to remove or replace existing elements by setOption:

\n
myChart.setOption({\n    ...,\n    graphic: [\n        { // Remove the element 'text1' defined above.\n            id: 'text1',\n            $action: 'remove',\n            ...\n        },\n        { // Replace the element 'rect1' to a new circle element.\n          // Note, although in the sample above 'rect1' is a children of a group,\n          // it is not necessary to consider level relationship when setOption\n          // again if you use id to specify them.\n            id: 'rect1',\n            $action: 'replace',\n            type: 'circle',\n            ...\n        }\n    ]\n});\n
\n

Notice, when using setOption to modify existing elements, if id is not specified, new options will be mapped to existing elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.

\n

Graphic Element Configuration

\n

Different types of graphic elements has their own configuration respectively, but they have these common configuration below:

\n
{\n    // id is used to specifying element when willing to update it.\n    // id can be ignored if you do not need it.\n    id: 'xxx',\n\n    // Specify element type. Can not be ignored when define a element at the first time.\n    type: 'image',\n\n    // All of the properties below can be ignored and a default value will be assigned.\n\n    // Specify the operation should be performed to the element when calling `setOption`.\n    // Default value is 'merge', other values can be 'replace' or 'remove'.\n    $action: 'replace',\n\n    // These four properties is used to locating the element. Each property can be absolute\n    // value (like 10, means 10 pixel) or percent (like '12%') or 'center'/'middle'.\n    left: 10,\n    // right: 10,\n    top: 'center',\n    // bottom: '10%',\n\n    shape: {\n        // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,\n        // `height`, `r`, `points`, ...\n        // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`\n        // do not work here.\n    },\n\n    style: {\n        // Here are configurations for style of the element, like `fill`, `stroke`,\n        // `lineWidth`, `shadowBlur`, ...\n    },\n\n    // z value of the elements.\n    z: 10,\n    // Whether response to mouse events / touch events.\n    silent: true,\n    // Whether the element is visible.\n    invisible: false,\n    // Used to specify whether the entire transformed element (containing children if is group)\n    // is confined in its container. Optional values: 'raw', 'all'.\n    bounding: 'raw',\n    // Can be dragged or not.\n    draggable: false,\n    // Event handler, can also be onmousemove, ondrag, ... (listed below)\n    onclick: function () {...}\n}\n
\n

Event Handlers of Graphic Element

\n

These events are supported:\nonclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop.

\n

Hierarchy of Graphic Elements

\n

Only group element has children, which enable a group of elements to be positioned and transformed together.

\n

Shape Configuration of Graphic Element

\n

Elements with different types have different shape setting respectively. For example:

\n
{\n    type: 'rect',\n    shape: {\n        x: 10,\n        y: 10,\n        width: 100,\n        height: 200\n    }\n},\n{\n    type: 'circle',\n    shape: {\n        cx: 20,\n        cy: 30,\n        r: 100\n    }\n},\n{\n    type: 'image',\n    style: {\n        image: 'http://example.website/a.png',\n        x: 100,\n        y: 200,\n        width: 230,\n        height: 400\n    }\n},\n{\n    type: 'text',\n    style: {\n        text: 'This text',\n        x: 100,\n        y: 200\n    }\n\n}\n
\n

Transforming and Absolutely Positioning of Graphic Element

\n

Element can be transformed (translation, rotation, scale). See position, rotation, scale, origin

\n

For example:

\n
{\n    type: 'rect', // or any other types.\n\n    // Translation, using [0, 0] by default.\n    position: [100, 200],\n\n    // Scale, using [1, 1] by default.\n    scale: [2, 4],\n\n    // Rotation, using 0 by default. Negative value means rotating clockwise.\n    rotation: Math.PI / 4,\n\n    // Origin point of rotation and scale, using [0, 0] by default.\n    origin: [10, 20],\n\n    shape: {\n        // ...\n    }\n}\n
\n

Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be "stacked".

\n

Transformation is performed by this order:

\n
    \n
  1. Translate [-el.origin[0], -el.origin[1]].
    2. \n
  2. Scale according to el.scale.
    3. \n
  3. Rotate according to el.rotation.
    4. \n
  4. Translate back according to el.origin.
    5. \n
  5. Translate according to el.position.
    6. \n
\n

Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.

\n

Relatively Positioning

\n

In real application, size of a container is always not fixed. So mechanism of relative position is required. In graphic component, left / right / top / bottom / width / height are used to position element relatively.

\n

For example:

\n
{ // Position the image at the bottom center of its container.\n    type: 'image',\n    left: 'center', // Position at the center horizontally.\n    bottom: '10%',  // Position beyond the bottom boundary 10%.\n    style: {\n        image: 'http://example.website/a.png',\n        width: 45,\n        height: 45\n    }\n},\n{ // Position the entire rotated group at the right-bottom corner of its container.\n    type: 'group',\n    right: 0,  // Position at the right boundary.\n    bottom: 0, // Position at the bottom boundary.\n    rotation: Math.PI / 4,\n    children: [\n        {\n            type: 'rect',\n            left: 'center', // Position at horizontal center according to its parent.\n            top: 'middle',  // Position at vertical center according to its parent.\n            shape: {\n                width: 190,\n                height: 90\n            },\n            style: {\n                fill: '#fff',\n                stroke: '#999',\n                lineWidth: 2,\n                shadowBlur: 8,\n                shadowOffsetX: 3,\n                shadowOffsetY: 3,\n                shadowColor: 'rgba(0,0,0,0.3)'\n            }\n        },\n        {\n            type: 'text',\n            left: 'center', // Position at horizontal center according to its parent.\n            top: 'middle',  // Position at vertical center according to its parent.\n            style: {\n                fill: '#777',\n                text: [\n                    'This is text',\n                    'This is text',\n                    'Print some text'\n                ].join('\\n'),\n                font: '14px Microsoft YaHei'\n            }\n        }\n    ]\n}\n
\n

Note, bounding can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"elements":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"

group is the only type that can contain children, so that a group of elements can be positioned and transformed together.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"group"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"width":{"type":["number"],"description":"

Specify width of this group.

\n

This width is only used for the positioning of its children.

\n

When width is 0, children can also be positioned according to its parent using left: 'center'.

\n","default":0},"height":{"type":["number"],"description":"

Specify height of this group.

\n

This height is only used for the positioning of its children.

\n

When height is 0, children can also be positioned according to its parent using top: 'middle'.

\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"

In custom series, when diffChildrenByName is set as true, for each group returned from renderItem, "diff" will be performed to its children according to the name attribute of each graphic elements. Here "diff" means that map the coming graphic elements to the existing graphic elements when repainting according to name, which enables the transition animation if data is modified.

\n

But notice that the operation is performance consuming, do not use it for large data amount.

\n","default":false},"children":{"type":["Array"],"description":"

A list of children, each item is a declaration of an element.

\n"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"image"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"

Specify content of the image, can be a URL, or dataURI.

\n"},"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"width":{"type":["number"],"description":"

The width of the shape of the element.

\n","default":0},"height":{"type":["numbr"],"description":"

The height of the shape of the element.

\n

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","default":0},"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Text block.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"text"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"

Text content. \\n can be used as a line break.

\n","default":"''"},"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"font":{"type":["string"],"description":"

Font size, font type, font weight, font color, follow the form of css font.

\n

For example:

\n
// size | family\nfont: '2em "STHeiti", sans-serif'\n\n// style | weight | size | family\nfont: 'italic bolder 16px cursive'\n\n// weight | size | family\nfont: 'bolder 2em "Microsoft YaHei", sans-serif'\n
"},"textAlign":{"type":["string"],"description":"

Text horizontal alignment. Optional values: 'left', 'center', 'right'.

\n

'left' means the left side of the text block is specified by the style.x, while 'right' means the right side of the text block is specified by style.y.

\n","default":"'left'"},"width":{"type":["number"],"description":"

Text block width. Used for overflow calculation.

\n"},"overflow":{"type":["string"],"description":"

When the text content exceeds the width, the text display strategy is: 'break', 'breakAll', 'truncate', 'none'.

\n
    \n
  • 'break' is to try to ensure that the complete word is not truncated (similar to CSS word-break: break-word;)
    • \n
  • 'breakAll': can break at any character
    • \n
  • 'truncate': truncate the text to display '...'，you can use ellipsis to customize the display of the ellipsis
    • \n
  • 'none': no line break
    • \n
\n"},"ellipsis":{"type":["string"],"description":"

When overflow is set to 'truncate', the default is ....

\n"},"textVerticalAlign":{"type":["string"],"description":"

Text vertical alignment. Optional values: 'top', 'middle', 'bottom'.

\n

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n"},"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Rectangle element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"rect"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"width":{"type":["number"],"description":"

The width of the shape of the element.

\n","default":0},"height":{"type":["numbr"],"description":"

The height of the shape of the element.

\n","default":0},"r":{"type":["Array"],"description":"

Specify border radius of the rectangular here. Generally, r should be [topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius], where each item is a number.

\n

Abbreviation is enabled, for example:

\n
    \n
  • r: 1 means [1, 1, 1, 1]
    • \n
  • r: [1] means [1, 1, 1, 1]
    • \n
  • r: [1, 2] means [1, 2, 1, 2]
    • \n
  • r: [1, 2, 3] means [1, 2, 3, 2]
    • \n
\n"},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Circle element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"circle"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Ring element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"ring"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"r0":{"type":["number"],"description":"

Inside radius.

\n","default":0},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Sector element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"sector"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"r0":{"type":["number"],"description":"

Inside radius.

\n","default":0},"startAngle":{"type":["number"],"description":"

start angle, in radian.

\n","default":0},"endAngle":{"type":["number"],"description":"

end angle, in radian.

\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"

Whether draw clockwise.

\n","default":true},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Arc element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"arc"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"r0":{"type":["number"],"description":"

Inside radius.

\n","default":0},"startAngle":{"type":["number"],"description":"

start angle, in radian.

\n","default":0},"endAngle":{"type":["number"],"description":"

end angle, in radian.

\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"

Whether draw clockwise.

\n","default":true},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":null},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":1},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Polygon element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"polygon"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"

A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...].

\n"},"smooth":{"type":["number","string"],"description":"

Whether smooth the line.

\n
    \n
  • If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of [0, 1].
    • \n
  • If the value is 'spline', Catmull-Rom spline interpolation is used.
    • \n
\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"

Whether prevent the smooth process cause the line out of the bounding box.

\n

Only works when smooth is number (bezier smooth).

\n","default":false},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Polyline element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"polyline"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"

A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...].

\n"},"smooth":{"type":["number","string"],"description":"

Whether smooth the line.

\n
    \n
  • If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of [0, 1].
    • \n
  • If the value is 'spline', Catmull-Rom spline interpolation is used.
    • \n
\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"

Whether prevent the smooth process cause the line out of the bounding box.

\n

Only works when smooth is number (bezier smooth).

\n","default":false},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":null},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":5},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Line element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"line"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"

x value of the start point.

\n","default":0},"y1":{"type":["number"],"description":"

y value of the start point.

\n","default":0},"x2":{"type":["number"],"description":"

x value of the end point.

\n","default":0},"y2":{"type":["number"],"description":"

y value of the end point.

\n","default":0},"percent":{"type":["number"],"description":"

Specify the percentage of drawing, useful in animation.

\n

Value range: [0, 1].

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":null},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":5},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"

Quadratic bezier curve or cubic bezier curve.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"bezierCurve"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"$action":{"type":["string"],"description":"

Specify the operation should be performed to the element when calling setOption.\nDefault value is 'merge', other values can be 'replace' or 'remove'.

\n

Optional values:

\n
    \n
  • 'merge': merge the given option to existing element (if any), otherwise create a new element.
    • \n
  • 'replace': create a new element according to the given option and replace the existing element (if any).
    • \n
  • 'remove': delete the existing element (if any).
    • \n
\n","default":"'merge'"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"left":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"right":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the height of its parent.
    • \n
  • 'center': means position the element in the middle of according to its parent.
    • \n
\n

Only one between left and right can work.

\n

If left or right is specified, positioning attributes in shape (like x, cx) will not work.

\n","default":"undefined"},"top":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"

Specify how to be positioned in its parent.

\n

When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a group element.

\n

Optional values:

\n
    \n
  • Pixel value: For example, can be a number 30, means 30px.
    • \n
  • Percent value: For example, can be a string '33%', means the final result should be calculated by this value and the width of its parent.
    • \n
  • 'middle': means position the element in the middle of according to its parent.
    • \n
\n

Only one between top and bottom can work.

\n

If top or bottom is specified, positioning attributes in shape (like y, cy) will not work.

\n","default":"undefined"},"bounding":{"type":["string"],"description":"

Used to specify whether the entire transformed element (containing children if is group) is confined in its container.

\n

See sample:

\n\n\n\n

Optional values:

\n
    \n

  • 'all': (default)\n Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.

    \n
    • \n

  • 'raw':\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.

    \n
    • \n
\n","default":"'all'"},"z":{"type":["number"],"description":"

z value of the elements, determine the overlap order.

\n","default":0},"zlevel":{"type":["number"],"description":"

Determine which canvas layer this element should be in.

\n

Notice: Multiple canvas layer may affect performance.

\n","default":0},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"draggable":{"type":["boolean","string"],"description":"

Whether the element is draggable.

\n

You may set it to be true/false to enable/disable dragging, or set it to be 'horizontal'/'vertical' to make the element only horizontally/vertically draggable.

\n","default":false},"progressive":{"type":["boolean"],"description":"

Whether use progressive render to improve performance. Usually used when number of element is too large.

\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"

x value of the start point.

\n","default":0},"y1":{"type":["number"],"description":"

y value of the start point.

\n","default":0},"x2":{"type":["number"],"description":"

x value of the end point.

\n","default":0},"y2":{"type":["number"],"description":"

y value of the end point.

\n","default":0},"cpx1":{"type":["number"],"description":"

x of control point.

\n","default":0},"cpy1":{"type":["number"],"description":"

y of control point.

\n","default":0},"cpx2":{"type":["number"],"description":"

x of the second control point. If specified, cubic bezier is used.

\n

If both cpx2 and cpy2 are not set, quatratic bezier is used.

\n","default":null},"cpy2":{"type":["number"],"description":"

y of the second control point. If specified, cubic bezier is used.

\n

If both cpx2 and cpy2 are not set, quatratic bezier is used.

\n","default":null},"percent":{"type":["number"],"description":"

Specify the percentage of drawing, useful in animation.

\n

Value range: [0, 1].

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}}]},"description":"

A list of all graphic elements.

\n

Note, the standard configuration of graphic component is:

\n
{\n    graphic: {\n        elements: [\n            {type: 'rect', ...}, {type: 'circle', ...}, ...\n        ]\n    }\n}\n
\n

But we always use short patterns for convenience:

\n
{\n    graphic: { // Declare only one graphic element.\n        type: 'rect',\n        ...\n    }\n}\n
\n

Or:

\n
{\n    graphic: [ // Declare multiple graphic elements.\n        {type: 'rect', ...}, {type: 'circle', ...}, ...\n    ]\n}\n
\n"}}},"calendar":{"type":["Object"],"description":"

Calendar coordinates.

\n

In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.

\n

Example of using heatmap in calendar coordinates:

\n\n\n\n

Example of using effectScatter in calendar coordinates:

\n\n\n\n

Example of using graph in calendar coordinates:

\n\n\n\n

By combining calendar coordinate system and charts, you may be able to create more wonderful effects.

\n

Display Text in Calendar,\nDisplay Pies in Calendar

\n
\n

Calendar layout

\n

Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So calendar.orient can help in this case.

\n
\n

Adapt to container size

\n

Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: left right top bottom width height, which make calendar possible to modify its size according to container size. Besides, cellSize can be specified to fix the size of each cell of calendar.

\n
\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between calendar component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":80},"top":{"type":["string","number"],"description":"

Distance between calendar component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":60},"right":{"type":["string","number"],"description":"

Distance between calendar component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between calendar component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"width":{"type":["number","string"],"description":"\n\n

The height of calendar coordinates.

\n

Note: cellSize is 20 by default. If width is set,\n cellSize[0] will be forced to auto;

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"auto"},"height":{"type":["number","string"],"description":"\n\n

The height of calendar coordinates.

\n

Note: cellSize is 20 by default. If height is set,\n cellSize[1] will be forced to auto;

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":"auto"},"range":{"type":["number","string","Array"],"description":"

Required, range of Calendar coordinates, support multiple formats.

\n

Examples:

\n
\n// one year\nrange: 2017\n\n// one month\nrange: '2017-02'\n\n//  a range\nrange: ['2017-01-02', '2017-02-23']\n\n// note: they will be identified as ['2017-01-01', '2017-02-01']\nrange: ['2017-01', '2017-02']\n\n
\n"},"cellSize":{"type":["number","Array"],"description":"\n\n

The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.

\n

Support setting self-adaptation: auto, the default width and height to be 20.

\n

Examples:

\n
\n// Set the width and height to be 20\ncellSize: 20\n\n// Set the width to be 20, and height to be 40\ncellSize: [20, 40]\n\n// Set width and height to be self-adaptation\ncellSize: [40]\n\n// Set the width and height to be 20\ncellSize: 'auto'\n\n// Set the width to be self-adaptation, and height to be 40\ncellSize: ['auto', 40]\n\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"20"},"default":20},"orient":{"type":["string"],"description":"\n\n

The layout orientation of calendar.

\n

Options:

\n
    \n
  • 'horizontal'
    • \n
  • 'vertical'
    • \n
\n","uiControl":{"type":"enum","options":"horizontal,vertical","default":"horizontal"},"default":"'horizontal'"},"splitLine":{"type":["Object"],"description":"

Calendar coordinates splitLine style.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent the splitLine from showing

\n","uiControl":{"type":"boolean","show":"true"},"default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

splitLineLine color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#000"},"width":{"type":["number"],"description":"\n\n

splitLine line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"solid"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n

Examples:

\n
calendar: [{\n    splitLine: {\n        show: true,\n        lineStyle: {\n            color: '#000',\n            width: 1,\n            type: 'solid'\n        }\n    }\n}]\n
\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Every rect style in calendar coordinates.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

calendar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#fff"},"borderColor":{"type":["Color"],"description":"\n\n

calendar border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"\n\n

calendar border width. No border when it is set to be 0.

\n

calendar border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

calendar border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n

Examples:

\n
calendar: [{\n    itemStyle: {\n        color: '#fff',\n        borderWidth: 1,\n        borderColor: '#ccc'\n    }\n}]\n
\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"dayLabel":{"type":["Object"],"description":"

Day style in calendar coordinates.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent dayLabel from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"firstDay":{"type":["number"],"description":"\n\n

A week from the beginning of the week, the default starting on Sunday.

\n

Examples:

\n
\ncalendar: [{\n    dayLabel: {\n        firstDay: 1 // start on Monday\n    }\n}]\n\n
\n","uiControl":{"type":"number","min":"0","max":"6","step":"1"},"default":0},"margin":{"type":["number"],"description":"\n\n

The margin between the day label and the axis line.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":0},"position":{"type":["string"],"description":"\n\n

Position of week, at the beginning or end of the range.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,end","default":"start"},"default":"'start'"},"nameMap":{"type":["string","Array"],"description":"\n\n

Week text content, defaults to 'en'. Since v5.2.2, it defaults to the specified locale name when initializing charts. If not specified, it defaults to the auto-detected locale by the browser language.

\n

It supports Chinese(cn), English(en), and customized array. Since v5.2.2, it also supports any built-in(EN/ZH) or other registered locale names (case-sensitive).

\n

The index 0 always means Sunday.

\n

Examples:

\n
\n// Before v5.2.2\n\n// shortcut to English  ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\nnameMap: 'en',\n// shortcut to Chinese ['日', '一', '二', '三', '四', '五', '六']\nnameMap: 'cn',\n\n// Since v5.2.2\n\n// shortcut to English  ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\nnameMap: 'EN',\n// shortcut to Chinese ['日', '一', '二', '三', '四', '五', '六']\nnameMap: 'ZH',\n\n// Customized: mixed in English and Chinese or not displayed\nnameMap: ['S', '一', 'T', '三', '', '五', 'S'],\n\ncalendar: [{\n    dayLabel: {\n        // nameMap: 'en' // Before v5.2.2\n        nameMap: 'EN'    // Since v5.2.2\n    }\n}]\n
\n","uiControl":{"type":"enum","options":"EN,ZH","default":"EN"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"#000"},"default":"#000"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"silent":{"type":["boolean"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false}}},"monthLabel":{"type":["Object"],"description":"

Month label in calendar coordinates.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to prevent monthLabel from showing.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"margin":{"type":["number"],"description":"\n\n

The margin between the month label and the axis line.

\n","uiControl":{"type":"number","min":"0","step":"5"},"default":5},"position":{"type":["string"],"description":"\n\n

Position of week, at the beginning or end of the range.

\n

Options:

\n
    \n
  • 'start'
    • \n
  • 'end'
    • \n
\n","uiControl":{"type":"enum","options":"start,end","default":"start"},"default":"'start'"},"nameMap":{"type":["string","Array"],"description":"\n\n

Month text content, defaults to 'en'. Since v5.2.2, it defaults to the specified locale name when initializing charts. If not specified, it defaults to the auto-detected locale by the browser language.

\n

It supports Chinese(cn), English(en), and customized array. Since v5.2.2, it also supports any built-in(EN/ZH) or other registered locale names (case-sensitive).

\n

The index 0 always means Jan.

\n

Examples:

\n
\n// Before v5.2.2\n\n// Shortcut to English\n// ['Jan', 'Feb', 'Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\nnameMap: 'en',\n// Shortcut to Chinese\n// ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']\nnameMap: 'cn',\n\n// Since v5.2.2\n\n// Shortcut to English\n// ['Jan', 'Feb', 'Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\nnameMap: 'EN',\n// Shortcut to Chinese\n// ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']\nnameMap: 'ZH',\n\n// Customized settings: mixed in English, Chinese, Russian or not displayed\nnameMap: [\n    '一月', 'Feb', '三月',\n    '四月', 'May', '六月',\n    'Июль', '八月', '',\n    '十月', 'Nov', '十二月'\n],\n\ncalendar: [{\n    monthLabel: {\n        // nameMap: 'en' // Before v5.2.2\n        nameMap: 'EN'    // Since v5.2.2\n    }\n}]\n
\n","uiControl":{"type":"enum","options":"EN,ZH","default":"EN"}},"formatter":{"type":["string","Function"],"description":"

Formatter of month text label, which supports string template and callback function.

\n

Examples:

\n
// Use string template; eg: 2017-02\n/*\n    template variables:\n    {nameMap} default nameMap eg：'Feb'\n    {yyyy}   four-digit years eg: 2017\n    {yy}   two-digit years eg: 17\n    {MM}   two-digit month eg: 02\n    {M}   single-digit month eg: 2\n*/\nformatter: '{yyyy}-{MM}'\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg：'Feb'\n    param.yyyy   four-digit years eg: 2017\n    param.yy   two-digit years eg: 17\n    param.MM   two-digit month eg: 02\n    param.M   single-digit eg: 2\n*/\nformatter: function (param) {\n    // ...\n    return param.MM;\n}\n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"#000"},"default":"#000"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"silent":{"type":["boolean"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false}}},"yearLabel":{"type":["Object"],"description":"

Year label in calendar coordinates.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Set this to false to stop yearLabel from showing

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"margin":{"type":["number"],"description":"\n\n

The margin between the month label and the axis line.

\n","uiControl":{"type":"number","min":"0","step":"1"},"default":30},"position":{"type":["string"],"description":"\n\n

Position of year.

\n

Default:\nwhen orient is set as horizontal, position is left\nwhen orient is set as vertical, position is top

\n

Options:

\n
    \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
\n","uiControl":{"type":"enum","options":"top,bottom,left,right"}},"formatter":{"type":["string","Function"],"description":"

Formatter of year text label, which supports string template and callback function.

\n

By default, the current range of the year, if the interval across the year, showing the first year and the last year

\n

Examples:

\n
// Use string template; eg: ['2017-10-11', '2018-01-21']\n/*\n    template variables:\n    {nameMap} default nameMap eg：'2017-2018'\n    {start}   start year eg: 2017\n    {end}   end year eg: 2018\n*/\n\nformatter: '{start}-{end}'\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg：'2017-2018'\n    param.start   start year eg: 2017\n    param.end   end year eg: 2018\n*/\nformatter: function (param) {\n    // ...\n    return param.end;\n}\n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"silent":{"type":["boolean"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false}}},"dataset":{"type":["Object"],"description":"

dataset component is published since ECharts 4. dataset brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios.

\n

More details about dataset can be checked in the tutorial.

\n","properties":{"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"source":{"type":["Array","Object"],"description":"

Source data. Generally speaking, a source data describe a table, where these format below can be applied:

\n

2d array, where dimension names can be provided in the first row/column, or do not provide, only data.

\n
[\n    ['product', '2015', '2016', '2017'],\n    ['Matcha Latte', 43.3, 85.8, 93.7],\n    ['Milk Tea', 83.1, 73.4, 55.1],\n    ['Cheese Cocoa', 86.4, 65.2, 82.5],\n    ['Walnut Brownie', 72.4, 53.9, 39.1]\n]\n
\n

Row based key-value format (object array), where the keys indicate dimension names.

\n
[\n    {product: 'Matcha Latte', count: 823, score: 95.8},\n    {product: 'Milk Tea', count: 235, score: 81.4},\n    {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n    {product: 'Walnut Brownie', count: 988, score: 76.9}\n]\n
\n

Column based key-value format, where each value represents a column of a table.

\n
{\n    'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n    'count': [823, 235, 1042, 988],\n    'score': [95.8, 81.4, 91.2, 76.9]\n}\n
\n

More details about dataset can be checked in the tutorial.

\n"},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"sourceHeader":{"type":["boolean","number"],"description":"

Whether the first row/column of dataset.source represents dimension names. Optional values:

\n
    \n
  • null/undefined/'auto': means auto detect whether the first row/column is dimension names or data.
    • \n
  • true: the first row/column is dimension names.
    • \n
  • false: data start from the first row/column.
    • \n
  • number: means the row/column count of the dimension names, that is, the start index of data row/column. e.g. sourceHeader: 2 means the front two rows/columns are dimension names, the back ones are data.
    • \n
\n

Note: the first row/column means that if series.seriesLayoutBy is set as 'column', pick the first row, otherwise, if it is set as 'row', pick the first column.

\n"},"transform":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"","default":"'filter'"},"config":{"type":["*"],"description":"

The condition of transform "filter".

\n

See the tutorial of data transform.

\n"},"print":{"type":["boolean"],"description":"

When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property transform.print might help in such case. (transform.print is only available in dev environment).

\n
option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: 'filter',\n            config: { ... }\n            // The result of this transform will be printed\n            // in dev tool via `console.log`.\n            print: true\n        }\n    }],\n    ...\n}\n
\n","default":false}}},{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"","default":"'sort'"},"config":{"type":["*"],"description":"

The condition of transform "sort".

\n

See the tutorial of data transform.

\n"},"print":{"type":["boolean"],"description":"

When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property transform.print might help in such case. (transform.print is only available in dev environment).

\n
option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: 'filter',\n            config: { ... }\n            // The result of this transform will be printed\n            // in dev tool via `console.log`.\n            print: true\n        }\n    }],\n    ...\n}\n
\n","default":false}}},{"type":["Object"],"description":"

Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities.

\n

See the tutorial of data transform.

\n","properties":{"type":{"type":["string"],"description":"

Built-in transform has no namespace (like type: 'filter', type: 'sort').

\n

External transform has namespace (like type: 'ecStat:regression').

\n","default":"'xxx:xxx'"},"config":{"type":["*"],"description":"

The needed parameters of this data transform. Each type of transform has its own definition of config.

\n"},"print":{"type":["boolean"],"description":"

When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property transform.print might help in such case. (transform.print is only available in dev environment).

\n
option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: 'filter',\n            config: { ... }\n            // The result of this transform will be printed\n            // in dev tool via `console.log`.\n            print: true\n        }\n    }],\n    ...\n}\n
\n","default":false}}}]},"description":"

See the tutorial of data transform.

\n"},"fromDatasetIndex":{"type":["number"],"description":"

Specify the input dataset for dataset.transform.\nIf dataset.transform specified but both fromDatasetIndex and fromDatasetId are not specified, fromDatasetIndex: 0 will be used by default.

\n

See the tutorial of data transform.

\n"},"fromDatasetId":{"type":["string"],"description":"

Specify the input dataset for dataset.transform.

\n

See the tutorial of data transform.

\n"},"fromTransformResult":{"type":["number"],"description":"

If a dataset.transform produces more than one result, we can use fromTransformResult to retrieve some certain result.

\n

In most cases, fromTransformResult do not need to be specified because most transforms only produce one result. If fromTransformResult is not specified, we use fromTransformResult: 0 by default.

\n

See the tutorial of data transform.

\n"}}},"aria":{"type":["*"],"description":"

The W3C has developed the WAI-ARIA, the Accessible Rich Internet Applications Suite, which is dedicated to making web content and web applications accessible. Apache ECharts 4 complies with this specification by supporting the automatic generation of intelligent descriptions based on chart configuration items, allowing blind people to understand the chart content with the help of a reading device, making the chart accessible to a wider audience. In addition, Apache ECharts 5 adds support for applique textures as an auxiliary expression of color to further differentiate the data.

\n

It is turned off by default and needs to be turned on by setting aria.enabled to true.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether or not aria is turned on. If not, the label or decal effect is not applied.

\n","default":false},"label":{"type":["Object"],"description":"

If aria.enabled is set to true, label is enabled by default. When enabled, the description of the chart will be automatically and intelligently generated based on the chart, data, title, etc. Users can also modify the description through the configuration item.

\n

Example:

\n
option = {\n    aria: {\n        // The following lines can be omitted because label.enabled defaults to true.\n        // label: {\n        // enabled: true\n        // },\n        enabled: true\n    },\n    title: {\n        text: 'User access sources for a site',\n        x: 'center'\n    },\n    series: [\n        {\n            name: 'access source',\n            type: 'pie',\n            data: [\n                { value: 335, name: 'Direct Access' },\n                { value: 310, name: 'Email Marketing' },\n                { value: 234, name: 'Affiliate Ads' },\n                { value: 135, name: 'Video Ads' },\n                { value: 1548, name: 'Search Engine' }\n            ]\n        }\n    ]\n};\n
\n\n\n\n

On the generated chart DOM, there is an aria-label attribute that allows the blind to understand the chart with the help of a reading device. Its value is:

\n
\n

This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.

\n
\n

The basic process for generating the description is that if aria.enabled is set to true (not the default) and aria.label.enabled is set to true (the default), then the accessibility description is generated. Otherwise it is not generated. If aria.label.description is defined, it is used as the full description of the chart, otherwise the description is generated according to the template stitching. We provide a default algorithm for generating descriptions, and only if the generated descriptions are not quite right, you need to modify these templates, or even override them completely with aria.label.description.

\n

When using the template, if title.textis set, it is used in aria.label.general.withTitle. If title.text has no value, aria.label.general.withoutTitle is used instead. aria.general.withTitle supports a template '{title}', which will be replaced with the chart title. This means, if aria.general.withTitle is set to be 'The chart title is {title}.' and the chart title is Price Distribution, it will be interpreted into 'The chart title is Price Distribution.'

\n

After generating the title, the description of the series (aria.label.series) and the description of the data for each series (aria.label.data) are generated in turn.

\n

The complete description generation process is:

\n

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether or not to enable label generation for accessibility. When enabled, the attribute aria-label will be generated.

\n","default":true},"description":{"type":["string"],"description":"

By default, an algorithm is used to automatically generate a chart description, but if you want to fully customize it, you can set this value to a description. If it is set to 'This is a chart showing price changes', then the value of the aria-label attribute of the chart DOM is this string.

\n

This configuration item is often used to display text that specifies a general description of the chart, when displaying individual data does not show the contents of the chart. For example, if the chart is a map with a large number of scattered points, the default algorithm can only show the locations of the data points and cannot convey the author's intent as a whole. In this case, you can specify description as what the author wants to say.

\n","default":null},"general":{"type":["Object"],"description":"

For the overall description of the chart.

\n","properties":{"withTitle":{"type":["string"],"description":"

If the chart exists title.text, then withTitle is used. This includes the template variable.

\n
    \n
  • {title}: will be replaced with title.text of the chart.
    • \n
\n","default":"'This is a chart about \"{title}\".'"},"withoutTitle":{"type":["string"],"description":"

If the chart does not have title.text, then withoutTitle is used.

\n","default":"'This is a chart,'"}}},"series":{"type":["Object"],"description":"

series-related configuration items.

\n","properties":{"maxCount":{"type":["number"],"description":"

The maximum number of series in the description.

\n","default":10},"single":{"type":["Object"],"description":"

The description used when the chart contains only one series.

\n","properties":{"prefix":{"type":["string"],"description":"

Holistic descriptions for all series are shown before each series description. This includes template variables.

\n
    \n
  • {seriesCount}: will be replaced with the number of series, where it is always 1.
    • \n
\n","default":"''"},"withName":{"type":["string"],"description":"

This description is used if the series has the name attribute. This includes the template variable.

\n
    \n
  • {seriesName}: will be replaced with name of the series.
    • \n
  • {seriesType}: the name of the type that will be replaced with the series, e.g. 'Bar chart', 'Line chart', etc.
    • \n
\n","default":"' with type {seriesType} named {seriesName}.'"},"withoutName":{"type":["string"],"description":"

This description is used if the series has no name attribute. This includes the template variable.

\n
    \n
  • {seriesType}: the name of the type that will be replaced with the series, e.g. 'Bar chart', 'Line chart', etc.
    • \n
\n","default":"' with type {seriesType}.'"}}},"multiple":{"type":["Object"],"description":"

Description to use when the chart contains only multiple series.

\n","properties":{"prefix":{"type":["string"],"description":"

A holistic description for all series is displayed before each series description. This includes the template variable.

\n
    \n
  • {seriesCount}: will be replaced with the number of series.
    • \n
\n","default":"'. It consists of {seriesCount} series count.'"},"withName":{"type":["string"],"description":"

This description is used if the series has the name attribute. This includes the template variable.

\n
    \n
  • {seriesName}: will be replaced with name of the series.
    • \n
  • {seriesType}: the name of the type that will be replaced with the series, e.g. 'Bar chart', 'Line chart', etc.
    • \n
\n","default":"' The {seriesId} series is a {seriesType} representing {seriesName}."},"withoutName":{"type":["string"],"description":"

This description is used if the series has no name attribute. This includes the template variable.

\n
    \n
  • {seriesType}: the name of the type that will be replaced with the name of the series, e.g. 'Bar chart', 'Line chart', etc.
    • \n
\n","default":"' The {seriesId} series is a {seriesType}.'"},"separator":{"type":["Object"],"description":"

The separator between the series and the description of the series.

\n","properties":{"middle":{"type":["string"],"description":"

Except for the separator after the last series.

\n","default":"';'"},"end":{"type":["string"],"description":"

Delimiter after the last series.

\n","default":"'.'"}}}}}}},"data":{"type":["Object"],"description":"

Data-related configuration items.

\n","properties":{"maxCount":{"type":["number"],"description":"

The maximum number of data occurrences per series in the description.

\n","default":10},"allData":{"type":["string"],"description":"

Description to be used when all data is displayed. This item doesn't make all the data displayed. It can be achieved by setting aria.data.maxCount to Number.MAX_VALUE.

\n","default":"'whose data is --'"},"partialData":{"type":["string"],"description":"

Descriptions used when only partial data is displayed. This includes template variables.

\n
    \n
  • {displayCnt}: the number of data that will be replaced with the number of displays.
    • \n
\n","default":"'where the first {displayCnt} term is --'"},"withName":{"type":["string"],"description":"

This description is used if the data has the name attribute. This includes the template variable.

\n
    \n
  • {name}: name that will be replaced with the data.
    • \n
  • {value}: the value that will be replaced with the data.
    • \n
\n","default":"'The data for {name} is {value}'"},"withoutName":{"type":["string"],"description":"

This description is used if the data does not have the name attribute. This includes the template variable.

\n
    \n
  • {value}: the value that will be replaced with the data.
    • \n
\n","default":"'{value}'"},"excludeDimensionId":{"type":["Array"],"description":"
\n

Since v5.6.0

\n
\n

The specified column indexes are excluded in the data in aria.label.

\n"},"separator":{"type":["Object"],"description":"

The separator between data and data description.

\n","properties":{"middle":{"type":["string"],"description":"

The delimiter of the data except the last one.

\n","default":"','"},"end":{"type":["string"],"description":"

The delimiter after the last data.

\n

Note that usually the last series is followed by the series separator.end, so data.separator.end is an empty string in most cases.

\n","default":"''"}}}}}}},"decal":{"type":["Object"],"description":"

Decal patterns are added to series data as an additional hint other than colors to help differentiate the data. It is easy to enabled the default decal patterns by enabling it:

\n
aria: {\n    enabled: true,\n    decal: {\n        show: true\n    }\n}\n
\n\n\n

Most series types are supported, including: 'line', 'bar', 'pie', 'radar', 'treemap', 'sunburst', 'boxplot', 'sankey', 'funnel', 'gauge', 'pictorialBar', 'themeRiver', 'custom' and so on. Among them, some series have no filling color by default (such as 'line', 'radar', 'boxplot'), which take effect only if the 'areaStyle' is set.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether or not to display the decal pattern is not shown by default. If you want to display the applique, you need to make sure aria.enabled and aria.decal.show are both true.

\n","default":false},"decals":{"type":["Object","Array"],"description":"

The style of the decal pattern. If it is an Object type, it means all data will have the same style, if it is an array, then each item in the array will have one style and the data will be looped through the array in order.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}}}},"series":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"

broken line chart

\n

Broken line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing. It could be used in both rectangular coordinate andpolar coordinate.

\n

Tip: When areaStyle is set, area chart will be drawn.

\n

Tip: With visualMap component, Broken line / area chart can have different colors on different sections, as below:

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'line'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'polar'

    \n

    Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"polarIndex":{"type":["number"],"description":"

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

\n","default":0},"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'emptyCircle'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":4},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"showSymbol":{"type":["boolean"],"description":"\n\n

Whether to show symbol. It would be shown during tooltip hover.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showAllSymbol":{"type":["boolean"],"description":"\n\n

Only work when main axis is 'category' axis (axis.type is 'category'). Optional values:

\n
    \n
  • 'auto': Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with axisLabel.interval.
    • \n
  • true: Show all symbols.
    • \n
  • false: Follow the interval strategy with axisLabel.interval.
    • \n
\n","uiControl":{"type":"boolean"},"default":"'auto'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"stack":{"type":["string"],"description":"

If stack the value. On the same category axis, the series with the same stack name would be put on top of each other.

\n

See also stackStrategy on how to customize how values are stacked.

\n

Notice: stack only supports stacking on value and log axis for now. time and category axis are not supported.

\n

The effect of the below example could be seen through stack switching of toolbox on the top right corner:

\n\n\n","default":null},"stackStrategy":{"type":["string"],"description":"
\n

Since v5.3.3

\n
\n

How to stack values if the stack property has been set. Options:

\n
    \n
  • 'samesign': only stack values if the value to be stacked has the same sign as the currently cumulated stacked value.
    • \n
  • 'all': stack all values, irrespective of the signs of the current or cumulative stacked value.
    • \n
  • 'positive': only stack positive values.
    • \n
  • 'negative': only stack negative values.
    • \n
\n","default":"'samesign'"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"connectNulls":{"type":["boolean"],"description":"\n\n

Whether to connect the line across null points.

\n","uiControl":{"type":"boolean"},"default":false},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"triggerLineEvent":{"type":["boolean"],"description":"
\n

Since v5.2.2

\n
\n

Whether line and area can trigger the event.

\n","default":false},"step":{"type":["string","boolean"],"description":"\n\n

Whether to show as a step line. It can be true, false. Or 'start', 'middle', 'end'. Which will configure the turn point of step line.

\n

See the example using different step options:

\n\n\n","uiControl":{"type":"enum","options":"start,middle,end"},"default":false},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"endLabel":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Label on the end of line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"valueAnimation":{"type":["boolean"],"description":"

Whether to enable text animation of value change.

\n"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

The style of the symbol point of broken line.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n

It works only if areaStyle is set.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"lineStyle":{"type":["Object"],"description":"

Line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"

The style of area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"origin":{"type":["string","number"],"description":"\n\n

Origin position of area.

\n

By default, the area between axis line and data will be filled. This config enables you to fill the area from data to the max or min of the axis data or a specified value.

\n

Valid values:

\n
    \n
  • 'auto' to fill between axis line and data (Default)
    • \n
  • 'start' to fill between min axis value (when not inverse) and data
    • \n
  • 'end' to fill between max axis value (when not inverse) and data
    • \n
  • number to fill between specified value and data (Since v5.3.2)
    • \n
\n","uiControl":{"type":"enum","options":"auto,start,end"},"default":"'auto'"},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.7","min":"0","max":"1","step":"0.01"},"default":0.7}}},"emphasis":{"type":["Object"],"description":"

Highlight style of the graphic.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean","number"],"description":"
\n

Since v5.0.0

\n
\n

Whether to scale to highlight the data in emphasis state. number has been supported since v5.3.2, the default scale value is 1.1.

\n","default":true},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"endLabel":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"endLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"endLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"smooth":{"type":["boolean","number"],"description":"

Whether to show as smooth curve.

\n

If is typed in boolean, then it means whether to enable smoothing. If is typed in number, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.

\n

Please refer to smoothMonotone to change smoothing algorithm.

\n","default":false},"smoothMonotone":{"type":["string"],"description":"

Whether the broken line keep the monotonicity when it is smoothed. It can be set as 'x', 'y' to keep the monotonicity on x axis or y axis.

\n

It is usually used on dual value axis.

\n

Here are 2 examples of broken line chart with dual value axis, showing the differences when smoothMonotone is without any setting, and smoothMonotone is set as 'x'.

\n
    \n
  • No setting about smoothMonotone:
    • \n
\n

\n
    \n
  • It is set as 'x':
    • \n
\n

\n"},"sampling":{"type":["string"],"description":"

The downsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.

\n

Options:

\n
    \n
  • 'lttb' Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.
    • \n
  • 'average' Use average value of filter points
    • \n
  • 'min' Use minimum value of filter points
    • \n
  • 'max' Use maximum value of filter points
    • \n
  • 'minmax' Use maximum extremum absolute value of filter points (Since v5.5.0)
    • \n
  • 'sum' Use sum of filter points
    • \n
\n"},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of data item.

\n"},"value":{"type":["number"],"description":"

The value of a single data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of single data.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

single data symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"},"default":4},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of single data symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"label":{"type":["Object"],"description":"

The style of the text of single data point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"top"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

The style of the symbol of single data point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of specified single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"

Blur state of specified single data.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"

Select state of specified single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Line.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Line, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"linear"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

bar chart

\n

Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.

\n","properties":{"type":{"type":["string"],"description":"","default":"'bar'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'polar'

    \n

    Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"polarIndex":{"type":["number"],"description":"

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

\n","default":0},"roundCap":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.5.0

\n
\n\n\n

Whether to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.

\n\n\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"realtimeSort":{"type":["boolean"],"description":"

Whether to enable realtime sorting, which is used for bar-racing effect. Please refer to the tutorial Dynamic Sorting Bar Chart in the Handbook.

\n\n\n","default":false},"showBackground":{"type":["boolean"],"description":"
\n

Since v4.7.0

\n
\n\n\n

Whether to show background behind each bar. Use backgroundStyle to set background style.

\n\n\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"backgroundStyle":{"type":["Object"],"description":"
\n

Since v4.7.0

\n
\n

Background style of each bar if showBackground is set to be true.

\n\n\n\n\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'rgba(180, 180, 180, 0.2)'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

Bar color. By default, colors from global palette option.color is used.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"stack":{"type":["string"],"description":"

Name of stack. On the same category axis, the series with the same stack name would be put on top of each other.

\n

See also stackStrategy on how to customize how values are stacked.

\n

Notice: stack only supports stacking on value and log axis for now. time and category axis are not supported.

\n","default":null},"stackStrategy":{"type":["string"],"description":"
\n

Since v5.3.3

\n
\n

How to stack values if the stack property has been set. Options:

\n
    \n
  • 'samesign': only stack values if the value to be stacked has the same sign as the currently cumulated stacked value.
    • \n
  • 'all': stack all values, irrespective of the signs of the current or cumulative stacked value.
    • \n
  • 'positive': only stack positive values.
    • \n
  • 'negative': only stack negative values.
    • \n
\n","default":"'samesign'"},"sampling":{"type":["string"],"description":"

The downsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.

\n

Options:

\n
    \n
  • 'lttb' Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.
    • \n
  • 'average' Use average value of filter points
    • \n
  • 'min' Use minimum value of filter points
    • \n
  • 'max' Use maximum value of filter points
    • \n
  • 'minmax' Use maximum extremum absolute value of filter points (Since v5.5.0)
    • \n
  • 'sum' Use sum of filter points
    • \n
\n"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"barWidth":{"type":["number","string"],"description":"

The width of the bar. Adaptive when not specified.

\n\n\n\n\n

Can be an absolute value like 40 or a percent value like '60%'. The percent is based on the calculated category width.

\n

In a single coordinate system, this attribute is shared by multiple 'bar' series. This attribute should be set on the last 'bar' series in the coordinate system, then it will be adopted by all 'bar' series in the coordinate system.

\n","uiControl":{"type":"percent"},"default":null},"barMaxWidth":{"type":["number","string"],"description":"

The maximum width of the bar.

\n

Has higher priority than barWidth.

\n

Can be an absolute value like 40 or a percent value like '60%'. The percent is based on the calculated category width.

\n

In a single coordinate system, this attribute is shared by multiple 'bar' series. This attribute should be set on the last 'bar' series in the coordinate system, then it will be adopted by all 'bar' series in the coordinate system.

\n","default":null},"barMinWidth":{"type":["number","string"],"description":"

The minimum width of the bar. In cartesian the default value is 1, otherwise the default value if null.

\n

Has higher priority than barWidth.

\n

Can be an absolute value like 40 or a percent value like '60%'. The percent is based on the calculated category width.

\n

In a single coordinate system, this attribute is shared by multiple 'bar' series. This attribute should be set on the last 'bar' series in the coordinate system, then it will be adopted by all 'bar' series in the coordinate system.

\n"},"barMinHeight":{"type":["number"],"description":"

The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.

\n","default":0},"barMinAngle":{"type":["number"],"description":"

The minimum angle of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small. Valid only for bar series on polar coordinates.

\n\n","uiControl":{"type":"number","min":"0"},"default":0},"barGap":{"type":["string"],"description":"\n\n

The gap between bars between different series, is a percent value like '20%', which means 20% of the bar width.

\n

Set barGap as '-100%' can overlap bars that belong to different series, which is useful when making a series of bar be background.

\n

In a single coordinate system, this attribute is shared by multiple 'bar' series. This attribute should be set on the last 'bar' series in the coordinate system, then it will be adopted by all 'bar' series in the coordinate system.

\n

For example:

\n\n\n","uiControl":{"type":"percent","default":"20%"},"default":"20%"},"barCategoryGap":{"type":["number","string"],"description":"

The bar gap of a single series, by default, a suitable spacing is calculated based on the number of series in the bar chart. When there are more series, the spacing will be appropriately reduced, can be set as a fixed value.

\n

In a single coordinate system, this attribute is shared by multiple 'bar' series. This attribute should be set on the last 'bar' series in the coordinate system, then it will be adopted by all 'bar' series in the coordinate system.

\n"},"large":{"type":["boolean"],"description":"\n\n

Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.

\n

After being enabled, largeThreshold can be used to indicate the minimum number for turning on the optimization.

\n

But when the optimization enabled, the style of single data item can't be customized any more.

\n","uiControl":{"type":"boolean"},"default":false},"largeThreshold":{"type":["number"],"description":"\n\n

The threshold enabling the drawing optimization.

\n","uiControl":{"type":"number","min":"1","default":"400"},"default":400},"progressive":{"type":["number"],"description":"

progressive specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.

\n

When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.

\n

Set progressive: 0 to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than progressiveThreshold.

\n","default":5000},"progressiveThreshold":{"type":["number"],"description":"

If current data amount is over the threshold, "progressive rendering" is enabled.

\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"

Chunk approach, optional values:

\n
    \n
  • 'sequential': slice data by data index.
    • \n
  • 'mod': slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.
    • \n
\n","default":"mod"},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of data item.

\n"},"value":{"type":["number"],"description":"

The value of a single data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of single data.

\n","properties":{"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Bar chart .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Bar chart , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.

\n

Tip: The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the bar graph chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the roseType to distinguish different data through radius.

\n

For multiple pie series in a single chart, you may use left, right, top, bottom, width, and height to locate the pies. Percetage values like radius or label.edgeDistance are relative to the viewport defined by this setting.

\n

The below example shows a customized Nightingale chart:

\n\n\n\n

Since ECharts v4.6.0, we provide 'labelLine' and 'edge' two extra layouts. Check label.alignTo for more information.

\n","properties":{"type":{"type":["string"],"description":"","default":"'pie'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'data'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"coordinateSystem":{"type":["string"],"description":"
\n

Since v5.4.0

\n
\n

The coordinate used in the series, whose options are:

\n
    \n

  • null or 'none'

    \n

    No coordinate.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n
    \n

  • 'calendar'

    \n

    Use calendar coordinates, with calendarIndex to assign the corresponding calendar coordinate components.

    \n
    • \n
\n
    \n

  • 'none'

    \n

    Do not use coordinate system.

    \n
    • \n
\n","default":null},"geoIndex":{"type":["number"],"description":"
\n

Since v5.4.0

\n
\n

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"calendarIndex":{"type":["number"],"description":"
\n

Since v5.4.0

\n
\n

Index of calendar coordinates to combine with, which is useful for multiple calendar coordinates in one chart.

\n","default":0},"selectedMode":{"type":["boolean","string"],"description":"\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"selectedOffset":{"type":["number"],"description":"\n\n

The offset distance of selected sector.

\n","uiControl":{"type":"number","min":"0","default":"10"},"default":10},"clockwise":{"type":["boolean"],"description":"\n\n

Whether the layout of sectors of pie chart is clockwise.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"startAngle":{"type":["number"],"description":"\n\n

The start angle, which range is [0, 360].

\n","uiControl":{"type":"angle","step":"1","min":"0","max":"360","default":"90"},"default":90},"endAngle":{"type":["number","string"],"description":"\n\n\n\n
\n

Since v5.5.0

\n
\n

The end angle, the default value is 'auto'.

\n

When the value is 'auto', the end angle is calculated automatically based on startAngle to ensure it is a complete circle.

\n","uiControl":{"type":"angle","step":"1","min":"0","max":"360","default":"270"},"default":"'auto'"},"minAngle":{"type":["number"],"description":"\n\n

The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.

\n","uiControl":{"type":"angle","step":"1","min":"0","max":"360","default":"0"},"default":0},"padAngle":{"type":["number"],"description":"\n\n\n\n
\n

Since v5.5.0

\n
\n

The interval angle between the sectors (0 ~ 360).

\n","uiControl":{"type":"angle","step":"1","min":"0","max":"360","default":"0"},"default":0},"minShowLabelAngle":{"type":["number"],"description":"\n\n

If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.

\n","uiControl":{"type":"angle","step":"1","min":"0","max":"360","default":"0"},"default":0},"roseType":{"type":["boolean","string"],"description":"\n\n

Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:

\n
    \n
  • 'radius' Use central angle to show the percentage of data, radius to show data size.
    • \n
  • 'area' All the sectors will share the same central angle, the data size is shown only through radiuses.
    • \n
\n","uiControl":{"type":"enum","options":"radius,area"},"default":false},"avoidLabelOverlap":{"type":["boolean"],"description":"\n\n

Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"stillShowZeroSum":{"type":["boolean"],"description":"\n\n

Whether to show sector when all data are zero.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"percentPrecision":{"type":["number"],"description":"\n\n

The precision of the percentage value. The default value is 2.

\n","uiControl":{"type":"number","min":"0","default":"2"},"default":2},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between pie chart component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":0},"top":{"type":["string","number"],"description":"

Distance between pie chart component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":0},"right":{"type":["string","number"],"description":"

Distance between pie chart component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":0},"bottom":{"type":["string","number"],"description":"

Distance between pie chart component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":0},"width":{"type":["string","number"],"description":"

Width of pie chart component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of pie chart component. Adaptive by default.

\n","default":"'auto'"},"showEmptyCircle":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

If display an placeholder circle when there is no data.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"emptyCircleStyle":{"type":["Object"],"description":"
\n

Since v5.2.0

\n
\n

Style of circle placeholder.

\n\n\n\n","uiControl":{"type":"boolean","default":"true"},"properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"lightgray"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Text label of pie chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"

The position of label.

\n

Options:

\n
    \n

  • 'outside'

    \n

    Outside of sectors of pie chart, which relates to corresponding sector through visual guide line.

    \n
    • \n

  • 'inside'

    \n

    Inside the sectors of pie chart.

    \n
    • \n

  • 'inner' is the same with 'inside'.

    \n
    • \n

  • 'center'

    \n

    In the center of pie chart. See pie-doughnut example

    \n
    • \n
\n","default":"'outside'"},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"alignTo":{"type":["string"],"description":"\n\n

Label aligning policy. Valid only when position is 'outer'.

\n

Since ECharts v4.6.0, we provide 'labelLine' and 'edge' two extra valid alignTo values.

\n
    \n
  • 'none' (default): label lines have fixed length as labelLine.length and labelLine.length2.
    • \n
  • 'labelLine': aligning to the end of label lines and the length of the shortest horizontal label lines is configured by labelLine.length2.
    • \n
  • 'edge': aligning to text and the distance between the edges of text and the viewport is configured by label.edgeDistance.
    • \n
\n\n\n","uiControl":{"type":"enum","options":"labelLine,edge"},"default":"'none'"},"edgeDistance":{"type":["string","number"],"description":"\n\n

The horizontal distance between text edges and viewport when label.position is 'outer' and label.alignTo is 'edge'.

\n\n\n\n

In most cases, you need a small edgeDistance value like 10 for mobile devices to make sure more text can be shown instead of being .... But on larger resolutions, a percentage value should be applied so that the label lines won't be too long. If your chart is used in varied resolutions, it is advised to set responsive design for different resolutions.

\n","uiControl":{"type":"percent","default":"20%"},"default":"'25%'"},"bleedMargin":{"type":["number"],"description":"\n\n

The horizontal distance between text and viewport when label.position is 'outer' and label.alignTo is 'none' or 'labelLine'. Longer text will be truncated into '...'.

\n\n\n","uiControl":{"type":"number","default":"10","min":"0","step":"1"},"default":10},"distanceToLabelLine":{"type":["number"],"description":"\n\n

Distance between label line and text.

\n\n\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5}}},"labelLine":{"type":["Object"],"description":"

The style of visual guide line. Will show when label position is set as 'outside'.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length":{"type":["number"],"description":"\n\n

The length of the first segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":90},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"maxSurfaceAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Max angle between guide line and surface normal. To prevent guide line overlapping with sector.

\n

Can be 0 - 180 degree.

\n"}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Whether to scale to highlight the data in emphasis state.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"scaleSize":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Size of scale. Available when emphasis.scale is set as true.

\n","uiControl":{"type":"number","min":"0","default":"10"},"default":10},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"center":{"type":["Array"],"description":"\n\n

Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.

\n

Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.

\n

Example:

\n
// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n
","uiControl":{"type":"percentvector","dims":"x,y"},"default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"\n\n

Radius of Pie chart. Value can be:

\n
    \n
  • number: Specify outside radius directly.
    • \n
  • string: For example, '20%', means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).
    • \n
\n
    \n
  • Array.<number|string>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.
    • \n
\n

Donut chart can be achieved by setting a inner radius.

\n","uiControl":{"type":"percentvector","dims":"inner,outer","default":"0%, 75%"},"default":"[0, '75%']"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be a single data value, like:

\n
[12, 34, 56, 10, 23]\n
\n

Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:

\n
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n
\n

In this case, we can assign the second value in each array item to visualMap component.

\n

More likely, we need to assign name to each data item, in which case each item should be an object:

\n
[{\n    // name of date item\n    name: 'data1',\n    // value of date item is 8\n    value: 10\n}, {\n    name: 'data2',\n    value: 20\n}]\n
\n

Each data item can be further customized:

\n
[{\n    name: 'data1',\n    value: 10\n}, {\n    // name of data item\n    name: 'data2',\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of data item.

\n"},"value":{"type":["number"],"description":"

Data value.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"selected":{"type":["boolean"],"description":"

Whether the data item is selected.

\n","default":false},"label":{"type":["Object"],"description":"

The label configuration of a single sector.

\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"

The position of label.

\n

Options:

\n
    \n

  • 'outside'

    \n

    Outside of sectors of pie chart, which relates to corresponding sector through visual guide line.

    \n
    • \n

  • 'inside'

    \n

    Inside the sectors of pie chart.

    \n
    • \n

  • 'inner' is the same with 'inside'.

    \n
    • \n

  • 'center'

    \n

    In the center of pie chart. See pie-doughnut example

    \n
    • \n
\n","default":"'outside'"},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"length":{"type":["number"],"description":"\n\n

The length of the first segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"rotate":{"type":["boolean","number","string"],"description":"

Label rotation.

\n
    \n
  • If true or 'radial', the labels are rotated radially. (The 'radial' literal is supported since v5.2.0)
    • \n
  • If 'tangential', the labels are rotated tangentially. (Since v5.2.0)
    • \n
  • If number, the labels are rotated in degrees (-90° - 90°). The negative value represents clockwise.
    • \n
\n","default":null},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n
data: [\n\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animationType":{"type":["string"],"description":"\n\n

Initial animation type.

\n
    \n
  • 'expansion' Default expansion animation.
    • \n
  • 'scale' Scale animation. You can use it with animationEasing='elasticOut' to have popup effect.
    • \n
\n","uiControl":{"type":"enum","options":"expansion,scale"},"default":"'expansion'"},"animationTypeUpdate":{"type":["string"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

Animation type when data updates.

\n
    \n
  • 'transition' Changing start and end angle of each sector from the old value to new value.
    • \n
  • 'expansion' The whole pie expands again.
    • \n
\n","uiControl":{"type":"enum","options":"expansion,transition"},"default":"'transition'"},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Scatter (bubble) chart . The scatter chart in rectangular coordinate could be used to present the relation between x and y. If data have multiple dimensions, the values of the other dimensions can be visualized through symbol with various sizes and colors, which becomes a bubble chart. These can be done by using with visualMap component.

\n

It could be used with rectangular coordinate and polar coordinate and geographical coordinate.

\n","properties":{"type":{"type":["string"],"description":"","default":"'scatter'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'polar'

    \n

    Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n
    \n

  • 'calendar'

    \n

    Use calendar coordinates, with calendarIndex to assign the corresponding calendar coordinate components.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"polarIndex":{"type":["number"],"description":"

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

\n","default":0},"geoIndex":{"type":["number"],"description":"

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"calendarIndex":{"type":["number"],"description":"

Index of calendar coordinates to combine with, which is useful for multiple calendar coordinates in one chart.

\n","default":0},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":10},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"large":{"type":["boolean"],"description":"\n\n

Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.

\n

After being enabled, largeThreshold can be used to indicate the minimum number for turning on the optimization.

\n

But when the optimization enabled, the style of single data item can't be customized any more.

\n","uiControl":{"type":"boolean"},"default":false},"largeThreshold":{"type":["number"],"description":"\n\n

The threshold enabling the drawing optimization.

\n","uiControl":{"type":"number","min":"1","default":"2000"},"default":2000},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.8","min":"0","max":"1","step":"0.01"},"default":0.8}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean","number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Whether to scale to highlight the data in emphasis state. number has been supported since v5.3.2, the default scale value is 1.1.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"progressive":{"type":["number"],"description":"

progressive specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.

\n

When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.

\n

Set progressive: 0 to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than progressiveThreshold.

\n","default":400},"progressiveThreshold":{"type":["number"],"description":"

If current data amount is over the threshold, "progressive rendering" is enabled.

\n","default":3000},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

the name of data item.

\n"},"value":{"type":["Array"],"description":"

the value of data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of single data.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

single data symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of single data symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

the style setting about single data point(bubble).

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of single data.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Scatter.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Scatter, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.

\n

Tip: The effects of map was achieved through markPoint in ECharts 2.x. However, in ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.

\n","properties":{"type":{"type":["string"],"description":"","default":"'effectScatter'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"effectType":{"type":["string"],"description":"\n\n

Type of effect. Only ripple effect of 'ripple' is supported currently.

\n","uiControl":{"type":"enum","options":"ripple"},"default":"'ripple'"},"showEffectOn":{"type":["string"],"description":"\n\n

When to show the effect.

\n

Options:

\n
    \n
  • 'render' Show the effect when rendering is done.
    • \n
  • 'emphasis' Show the effect when it is highlight (hover).
    • \n
\n","uiControl":{"type":"enum","options":"render,emphasis","default":"render"},"default":"'render'"},"rippleEffect":{"type":["Object"],"description":"

Related configurations about ripple effect.

\n","properties":{"color":{"type":["string"],"description":"
\n

Since v4.4.0

\n
\n\n\n

Color of the ripple rings. The default value is the color of scatter.

\n","uiControl":{"type":"color"}},"number":{"type":["number"],"description":"
\n

Since v5.2.0

\n
\n\n\n

The number of ripples.

\n","uiControl":{"type":"number","min":"0","default":"3","step":"1"},"default":3},"period":{"type":["number"],"description":"\n\n

The period duration of animation, in seconds.

\n","uiControl":{"type":"number","min":"0","default":"4","step":"0.1"},"default":4},"scale":{"type":["number"],"description":"\n\n

The maximum zooming scale of ripples in animation.

\n","uiControl":{"type":"number","min":"1","default":"2.5","step":"0.1"},"default":2.5},"brushType":{"type":["string"],"description":"\n\n

The brush type for ripples. options: 'stroke' and 'fill'.

\n","uiControl":{"type":"enum","options":"stroke,fill","default":"fill"},"default":"'fill'"}}},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'polar'

    \n

    Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n
    \n

  • 'calendar'

    \n

    Use calendar coordinates, with calendarIndex to assign the corresponding calendar coordinate components.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"polarIndex":{"type":["number"],"description":"

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

\n","default":0},"geoIndex":{"type":["number"],"description":"

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"calendarIndex":{"type":["number"],"description":"

Index of calendar coordinates to combine with, which is useful for multiple calendar coordinates in one chart.

\n","default":0},"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":10},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean","number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Whether to scale to highlight the data in emphasis state. number has been supported since v5.3.2, the default scale value is 1.1.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"symbol":{"type":["string"],"description":"\n\n

Symbol of single data.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

single data symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"},"default":4},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of single data symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of the specified single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of the specified single data.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"

Select state of the specified single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.1.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

radar chart

\n

Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies radar component.

\n

Here is the example of AQI data which is presented in radar chart.

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'radar'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'data'"},"radarIndex":{"type":["number"],"description":"

Index of radar component that radar chart uses.

\n"},"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":4},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

Item style of the inflection point of the lines.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n

It works only if areaStyle is set.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"lineStyle":{"type":["Object"],"description":"

Line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"

Area filling style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.7","min":"0","max":"1","step":"0.01"},"default":0.7}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

The data in radar chart is multi-variable (dimension). Here is an example:

\n
data : [\n    {\n        value : [4300, 10000, 28000, 35000, 50000, 19000],\n        name : 'Allocated Budget'\n    },\n    {\n        value : [5000, 14000, 28000, 31000, 42000, 21000],\n        name : 'Actual Spending'\n    }\n]\n
\n

Among them, value item array contains data that is corresponding to radar.indicator.

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Data item name

\n"},"value":{"type":["number"],"description":"

Numerical value of a single data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of single data.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"},"default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

single data symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"},"default":4},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of single data symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"label":{"type":["Object"],"description":"

Style setting of the text on single inflection point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"top"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style setting of the symbol on single inflection point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Line style of a single item.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"

Area filling style of a single item.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.7","min":"0","max":"1","step":"0.01"},"default":0.7}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of selected state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'round'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Radar.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Radar, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Tree Diagram

\n

The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.

\n

Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option

\n

Tree example：

\n\n\n\n

Multiple series are combined into forest：

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'tree'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between tree component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"12%"},"top":{"type":["string","number"],"description":"

Distance between tree component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"12%"},"right":{"type":["string","number"],"description":"

Distance between tree component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"12%"},"bottom":{"type":["string","number"],"description":"

Distance between tree component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"12%"},"width":{"type":["string","number"],"description":"

Width of tree component.

\n","default":null},"height":{"type":["string","number"],"description":"

Height of tree component.

\n","default":null},"center":{"type":["Array"],"description":"

Center of current view-port. It can be an array containing two numbers in pixels or strings in percentage relative to the container width/height.\nstring is supported from version 5.3.3.

\n

Example:

\n
center: [115.97, '30%']\n
\n"},"zoom":{"type":["number"],"description":"

Zoom rate of current view-port.

\n","default":1},"layout":{"type":["string"],"description":"\n\n

The layout of the tree, which can be orthogonal and radial. Here the orthogonal layout is what we usually refer to the horizontal and vertical direction, the corresponding parameter value is orthogonal. The radial layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is radial.

\n

Orthogonal Example：

\n\n\n\n\n

Radial Example：

\n\n\n","uiControl":{"type":"enum","options":"orthogonal,radial","default":"orthogonal"},"default":"'orthogonal'"},"orient":{"type":["string"],"description":"\n\n

The direction of the orthogonal layout in the tree diagram. That means this configuration takes effect only if layout = 'orthogonal'. The corresponding directions are from left to right, from right to left, from top to bottom, from bottom to top, with shorthand values 'LR', 'RL', 'TB', 'BT'.\nNote: The previous configuration value 'horizontal' is equivalent to 'LR', 'vertical' is equivalent to 'TB'.

\n","uiControl":{"type":"enum","options":"LR,RL,TB,BT","default":"LR"},"default":"'LR'"},"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'emptyCircle'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":7},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"edgeShape":{"type":["string"],"description":"\n\n\n\n
\n

Since v4.7.0

\n
\n

The shape of the edge which is under the tree orthogonal layout. There are two types of shape, curve and polyline, the corresponding values are 'curve' and 'polyline'.

\n

Note: This configuration item is only valid under the orthogonal layout. Errors will be reported in the development environment under the radial layout.

\n","uiControl":{"type":"enum","options":"curve,polyline","default":"curve"},"default":"'curve'"},"edgeForkPosition":{"type":["string"],"description":"\n\n

This is the position where the polyline branches in the subtree when the shape of the edge is a polyline in the orthogonal layout. The position here refers to the percentage of the distance between the bifurcation point and the parent node of the subtree to the height of the entire subtree. The default value is '50%', which can be between ['0', '100%'].

\n

Note: This configuration item is only valid when edgeShape = 'polyline'.

\n","uiControl":{"type":"percent","default":"50%"},"default":"'50%'"},"roam":{"type":["boolean","string"],"description":"\n\n

Whether to enable mouse zooming and translating. false by default. If either zooming or translating is wanted, it can be set to 'scale' or 'move'. Otherwise, set it to be true to enable both.

\n","uiControl":{"type":"enum","options":"true,false,scale,move"},"default":false},"expandAndCollapse":{"type":["boolean"],"description":"\n\n

Subtree collapses and expands interaction, default true. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.

\n

Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use ECharts regular tag types, such as emptyCircle.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"initialTreeDepth":{"type":["number"],"description":"\n\n

The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node. This configuration item is primarily used in conjunction with collapsing and expansion interactions. The purpose is to prevent the nodes from obscuring each other. If set as -1 or null or undefined, all nodes are expanded.

\n","uiControl":{"type":"number","default":"2","min":"0","step":"1"},"default":2},"itemStyle":{"type":["Object"],"description":"

The style of each node in the tree, where itemStyle.color represents the fill color of the node, to distinguish the state of the subtree corresponding to collapsing or expansion.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1.5","min":"0","step":"0.5"},"default":1.5},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

label describes the style of the text corresponding to each node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n
    \n
  • 'ancestor' Focus on all ancestor nodes.
    • \n
  • 'descendant' Focus on all descendants nodes.
    • \n
\n
    \n
  • 'relative' Focus on all ancestor and descendants nodes. (Since v5.3.3)
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"leaves":{"type":["Object"],"description":"

Leaf node special configuration, such as the above tree diagram example, the leaf node and non-leaf node label location is different.

\n","properties":{"label":{"type":["Object"],"description":"

Describes the style of the text label corresponding to the leaf node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

The style of the leaf node in the tree.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of leaves nodes.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of leaves nodes.

\n","properties":{"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of leaves nodes.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"data":{"type":["Object"],"description":"

series-tree.data the data format is a tree structure, for example：

\n
{ // note that the outermost layer is an object that represents the root node of the tree.\n    name: "flare",    // the name of the node, the text corresponding to the current node label.\n    label: {          // the special label configuration (if necessary).\n        ...           // the format of the label is shown in the series-tree.label.\n    },\n    itemStyle: {      // the special itemStyle configuration (if necessary).\n        ...           // the format of the itemstyle is shown in the series-tree.itemStyle.\n    },\n    children: [\n        {\n            name: "flex",\n            value: 4116,    // value, which only displayed in tooltip.\n            label: {\n                ...\n            },\n            itemStyle: {\n                ...\n            },\n            collapsed: null, // If set as `true`, the node is collapsed in the initialization.\n            children: [...]  // leaf nodes do not have children, can not write.\n        },\n        ...\n    ]\n};\n
\n","properties":{"name":{"type":["string"],"description":"

The name of the tree node, used to identify each node.

\n"},"value":{"type":["number"],"description":"

The value of the node, displayed in the tooltip.

\n"},"collapsed":{"type":["boolean"],"description":"

Whether to collapse node at initialization.

\n"},"itemStyle":{"type":["Object"],"description":"

The style of the node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"

The label of the node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of a single node.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of a single node.

\n","properties":{"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of a single node.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

Defines the style of the tree edge.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of the tree edge.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"width":{"type":["number"],"description":"\n\n

The width of the tree edge.

\n","uiControl":{"type":"number","default":"1.5","min":"0"},"default":1.5},"curveness":{"type":["number"],"description":"\n\n

The curvature of the tree edge.

\n","uiControl":{"type":"number","default":"0.5","min":"0"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Treemap is a common way to present "hierarchical data" or "tree data". It primarily highlights the important nodes at all hierarchies in 『Tree』with area.

\n

Example:

\n\n\n\n\n\n

Visual Mapping:

\n

treemap maps the numerical values to area.

\n

Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.

\n

About visual encoding, see details in series-treemap.levels.

\n

Drill Down:

\n

The feature drill down means: when clicking a tree node, this node will be set as root and its children will be shown. When leafDepth is set, this feature is enabled.

\n

An example about drill down:

\n\n\n\n\n

Notice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:

\n
    \n

  • The position method using center/size is no longer supported, and left/top/bottom/right/width/height are used to position treemap, as other components do.

    \n
    • \n

  • The configuration item breadcrumb is moved outside itemStyle/itemStyle.emphasis, and it is in the same level with itemStyle now.

    \n
    • \n

  • The configuration item root is not available temporarily.User can zoom treemap to see some tiny or deep descendants, or using leafDepth to enable the feature of "drill down".

    \n
    • \n

  • The configuration item label is moved outside the itemStyle/itemStyle.emphasis, and it is in the same level with itemStyle now.

    \n
    • \n

  • The configuration items itemStyle.childBorderWidth and itemStyle.childBorderColor are not supported anymore (because in this way only 2 levels can be defined). series-treemap.levels is used to define all levels now.

    \n
    • \n
\n","properties":{"type":{"type":["string"],"description":"","default":"'treemap'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between treemap component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"center"},"top":{"type":["string","number"],"description":"

Distance between treemap component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"middle"},"right":{"type":["string","number"],"description":"

Distance between treemap component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between treemap component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"width":{"type":["string","number"],"description":"

Width of treemap component.

\n","default":"80%"},"height":{"type":["string","number"],"description":"

Height of treemap component.

\n","default":"80%"},"squareRatio":{"type":["number"],"description":"\n\n

The expected square ratio. Layout would approach the ratio as close as possible.

\n

It defaults to be the golden ratio: 0.5 * (1 + Math.sqrt(5)).

\n","uiControl":{"type":"number","min":"0.1","default":"0.75","step":"0.1"}},"leafDepth":{"type":["number"],"description":"\n\n

When leafDepth is set, the feature "drill down" is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.

\n

leafDepth represents how many levels are shown at most. For example, when leafDepth is set to 1, only one level will be shown.

\n

leafDepth is null/undefined by default, which means that "drill down" is disabled.

\n

An example about drill down:

\n\n\n","uiControl":{"type":"number","min":"1","step":"1"},"default":null},"drillDownIcon":{"type":["string"],"description":"

Marker when the node is able to be drilled down.

\n","default":"'▶'"},"roam":{"type":["boolean","string"],"description":"

Whether to enable dragging roam (move and zoom). Optional values are:

\n
    \n
  • false: roam is disabled.
    • \n
  • 'scale' or 'zoom': zoom only.
    • \n
  • 'move' or 'pan': move (translation) only.
    • \n
  • true: both zoom and move (translation) are available.
    • \n
\n","default":true},"scaleLimit":{"type":["Object"],"description":"
\n

Since v5.5.1

\n
\n

Limit of scaling, with min and max.

\n","properties":{"min":{"type":["number"],"description":"

Minimum scaling

\n"},"max":{"type":["number"],"description":"

Maximum scaling

\n"}}},"nodeClick":{"type":["boolean","string"],"description":"

The behaviour when clicking a node. Optional values are:

\n
    \n
  • false: Do nothing after clicked.
    • \n
  • 'zoomToNode': Zoom to clicked node.
    • \n
  • 'link': If there is link in node data, do hyperlink jump after clicked.
    • \n
\n","default":"'zoomToNode'"},"zoomToNodeRatio":{"type":["number"],"description":"\n\n

The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when nodeClick is set as 'zoomToNode' and no drill down happens). This configuration item indicates the ratio.

\n","uiControl":{"type":"number","min":"0","default":"0.1","step":"0.01"},"default":"0.32*0.32"},"visualDimension":{"type":["number"],"description":"

treemap is able to map any dimensions of data to visual.

\n

The value of series-treemap.data can be an array. And each item of the array represents a "dimension". visualDimension specifies the dimension on which visual mapping will be performed.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, visualDimension attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":0},"visualMin":{"type":["number"],"description":"\n\n

The minimal value of current level. Auto-statistics by default.

\n

When colorMappingBy is set to 'value', you are able to specify extent manually for visual mapping by specifying visualMin or visualMax.

\n","uiControl":{"type":"number","default":"0"},"default":null},"visualMax":{"type":["number"],"description":"\n\n

The maximal value of current level. Auto-statistics by default.

\n

When colorMappingBy is set to 'value', you are able to specify extent manually for visual mapping by specifying visualMin or visualMax.

\n","uiControl":{"type":"number","default":"100"},"default":null},"colorAlpha":{"type":["Array"],"description":"

It indicates the range of transparent rate (color alpha) for nodes of the series

\n

.\nThe range of values is 0 ~ 1.

\n

For example, colorAlpha can be [0.3, 1].

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorAlpha attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":null},"colorSaturation":{"type":["number"],"description":"

It indicates the range of saturation (color alpha) for nodes of the series.

\n

The range of values is 0 ~ 1.

\n

For example, colorSaturation can be [0.3, 1].

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorSaturation attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":null},"colorMappingBy":{"type":["string"],"description":"\n\n

Specify the rule according to which each node obtain color from color list. Optional values:

\n
    \n
  • 'value':
    • \n
\n

Map series-treemap.data.value to color.

\n

In this way, the color of each node indicate its value.

\n

visualDimension can be used to specify which dimension of data is used to perform visual mapping.

\n
    \n
  • 'index':
    • \n
\n

Map the index (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of color list, and the second node gets the second color.

\n

In this way, adjacent nodes are distinguished by color.

\n
    \n
  • 'id':
    • \n
\n

Map series-treemap.data.id to color.

\n

Since id is used to identify node, if user call setOption to modify the tree, each node will remain the original color before and after setOption called. See this example.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorMappingBy attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"enum","options":"index,value,id"},"default":"'index'"},"visibleMin":{"type":["number"],"description":"\n\n

A node will not be shown when its area size is smaller than this value (unit: px square).

\n

In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, visibleMin attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"number","default":"10","min":"0"},"default":10},"childrenVisibleMin":{"type":["number"],"description":"\n\n

Children will not be shown when area size of a node is smaller than this value (unit: px square).

\n

This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, childrenVisibleMin attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"number","default":"10","min":"0","step":"0.5"},"default":null},"label":{"type":["Object"],"description":"

label describes the style of the label in each node.

\n
\n

Tps: In treemap, label attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"upperLabel":{"type":["Object"],"description":"

upperLabel is used to specify whether show label when the node has children. When upperLabel.show is set as true, the feature that "show parent label" is enabled.

\n

The same as series-treemap.label, the option upperLabel can be placed at the root of series-treemap directly, or in series-treemap.level, or in each item of series-treemap.data.

\n

Specifically, series-treemap.label specifies the style when a node is a leaf, while upperLabel specifies the style when a node has children, in which case the label is displayed in the inner top of the node.

\n

See:

\n\n\n\n\n\n
\n

Tps: In treemap, label attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of label area.

\n","uiControl":{"type":"number","default":"20","min":"0","step":"0.5"},"default":20},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"
\n

Tps: In treemap, itemStyle attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null},"borderRadius":{"type":["number","Array"],"description":"\n\n

Border radius.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB","clean":"true"},"default":0},"borderWidth":{"type":["number"],"description":"\n\n

The border width of a node. There is no border when it is set as 0.

\n

Tip, gaps between child nodes are specified by gapWidth

\n","uiControl":{"type":"number","step":"0.5","min":"0"},"default":0},"gapWidth":{"type":["number"],"description":"\n\n

Gaps between child nodes.

\n","uiControl":{"type":"number","step":"0.5","min":"0"},"default":0},"borderColor":{"type":["Color"],"description":"\n\n

The border color and gap color of a node.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"\n\n

The color saturation of a border or gap. The value range is between 0 ~ 1.

\n

Tips:

\n

When borderColorSaturation is set, the borderColor is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be specified explicitly or inherited from its parent node) and mixing with borderColorSaturation.

\n

In this way, a effect can be implemented: different sections have different hue of gap color respectively, which makes users easy to distinguish both sections and levels.

\n

How to avoid confusion by setting border/gap of node

\n

If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.

\n

See the example. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use borderColorSaturation to lift the saturation.

\n","uiControl":{"type":"number","step":"0.01","min":"0","max":"1","default":"0.5"},"default":null},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n
    \n
  • 'ancestor' Focus on all ancestor nodes.
    • \n
  • 'descendant' Focus on all descendants nodes.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"breadcrumb":{"type":["Object"],"description":"

To show the path of the current node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the breadcrumb.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"left":{"type":["string","number"],"description":"

Distance between breadcrumb component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'center'"},"top":{"type":["string","number"],"description":"

Distance between breadcrumb component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'bottom'"},"right":{"type":["string","number"],"description":"

Distance between breadcrumb component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between breadcrumb component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"height":{"type":["number"],"description":"\n\n

The height of breadcrumb.

\n","uiControl":{"type":"number","min":"0","default":"22","step":"1"},"default":22},"emptyItemWidth":{"type":["number"],"description":"\n\n

When is no content in breadcrumb, this minimal width need to be set up.

\n","uiControl":{"type":"number","min":"0","default":"25","step":"1"},"default":25},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

breadcrumb color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"\n\n

breadcrumb border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"''"},"borderWidth":{"type":["number"],"description":"\n\n

breadcrumb border width. No border when it is set to be 0.

\n

breadcrumb border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

breadcrumb border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"#fff"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"emphasis":{"type":["Object"],"description":"
\n

Since v5.4.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

breadcrumb color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"rgba(0,0,0,0.9)"},"borderColor":{"type":["Color"],"description":"\n\n

breadcrumb border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"''"},"borderWidth":{"type":["number"],"description":"\n\n

breadcrumb border width. No border when it is set to be 0.

\n

breadcrumb border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

breadcrumb border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"#fff"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"levels":{"type":["Array"],"description":"

Multiple Levels Configuration

\n

treemap adopts 4-level configuration:

\n
"each node" --> "each level" --> "each series".\n

That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.

\n

levels is configurations on each levels, which is used most.

\n

For example:

\n
// Notice that in fact the data structure is not "tree", but is "forest".\ndata: [\n    {\n        name: 'nodeA',\n        children: [\n            {name: 'nodeAA'},\n            {name: 'nodeAB'},\n        ]\n    },\n    {\n        name: 'nodeB',\n        children: [\n            {name: 'nodeBA'}\n        ]\n    }\n],\nlevels: [\n    {...}, // configurations of the top level of the data structure "forest"\n        // (the level that contains 'nodeA', 'nodeB' shown above).\n    {...}, // configurations of the next level\n        // (the level that contains 'nodeAA', 'nodeAB', 'nodeBA' shown above)\n    {...}, // configurations of the next level\n    ...\n]\n
\n

The Rules about Visual Mapping

\n

When designing a treemap, we primarily focus on how to visually distinguish "different levels", "different categories in the same level", which requires appropriate settings of "rectangular color", "border thickness", "border color" and even "color saturation of rectangular" and so on on each level.

\n

See example. The top level is divided into several parts by colors "red", "green", "blue", and etc ... In each color block, colorSaturation is used to distinguish nodes in sublevel. The border color of the top level is "white", while the border color of the sublevel is the color that based on the current block color and processed by borderColorSaturation.

\n

treemap uses this rule of visual configuration: each level computes its visual value based on the configurations (color, colorSaturation, borderColor, borderColorSaturation) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.

\n

In this way, this effect can be configured: set a color list on the parent level, and set colorSaturation on the child level, and then each node in the parent level would obtain a color from the color list, and each node in the child level would obtain a value from colorSaturation and compound it with the color inherited from its parent node to get its final color.

\n

Dimensions and "Extra Visual Mapping"

\n

See the example below: every value field is set as an Array, in which each item in the array represents a dimension respectively.

\n
[\n    {\n        value: [434, 6969, 8382],\n        children: [\n            {\n                value: [1212, 4943, 5453],\n                id: 'someid-1',\n                name: 'description of this node',\n                children: [...]\n            },\n            {\n                value: [4545, 192, 439],\n                id: 'someid-2',\n                name: 'description of this node',\n                children: [...]\n            },\n            ...\n        ]\n    },\n    {\n        value: [23, 59, 12],\n        children: [...]\n    },\n    ...\n]\n
\n

treemap will map the first dimension (the first item of the array) to "area". If we want to express more information, we could map another dimension (specified by series-treemap.visualDimension) to another visual types, such as colorSaturation and so on. See the example and select the legend 'Growth'.

\n

How to avoid confusion by setting border/gap of node

\n

If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.

\n

See the example. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use borderColorSaturation to lift the saturation.

\n

Explanation about borderWidth, gapWidth, borderColor

\n

\n","items":{"type":"Object","properties":{"visualDimension":{"type":["number"],"description":"

treemap is able to map any dimensions of data to visual.

\n

The value of series-treemap.data can be an array. And each item of the array represents a "dimension". visualDimension specifies the dimension on which visual mapping will be performed.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, visualDimension attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":0},"visualMin":{"type":["number"],"description":"\n\n

The minimal value of current level. Auto-statistics by default.

\n

When colorMappingBy is set to 'value', you are able to specify extent manually for visual mapping by specifying visualMin or visualMax.

\n","uiControl":{"type":"number","default":"0"},"default":null},"visualMax":{"type":["number"],"description":"\n\n

The maximal value of current level. Auto-statistics by default.

\n

When colorMappingBy is set to 'value', you are able to specify extent manually for visual mapping by specifying visualMin or visualMax.

\n","uiControl":{"type":"number","default":"100"},"default":null},"color":{"type":["Array"],"description":"

A color list for a level. Each node in the level will obtain a color from the color list (the rule see colorMappingBy). It is empty by default, which means the global color list will be used.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, color attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n"},"colorAlpha":{"type":["Array"],"description":"

It indicates the range of transparent rate (color alpha) for nodes in a level

\n

.\nThe range of values is 0 ~ 1.

\n

For example, colorAlpha can be [0.3, 1].

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorAlpha attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":null},"colorSaturation":{"type":["number"],"description":"

It indicates the range of saturation (color alpha) for nodes in a level.

\n

The range of values is 0 ~ 1.

\n

For example, colorSaturation can be [0.3, 1].

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorSaturation attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":null},"colorMappingBy":{"type":["string"],"description":"\n\n

Specify the rule according to which each node obtain color from color list. Optional values:

\n
    \n
  • 'value':
    • \n
\n

Map series-treemap.data.value to color.

\n

In this way, the color of each node indicate its value.

\n

visualDimension can be used to specify which dimension of data is used to perform visual mapping.

\n
    \n
  • 'index':
    • \n
\n

Map the index (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of color list, and the second node gets the second color.

\n

In this way, adjacent nodes are distinguished by color.

\n
    \n
  • 'id':
    • \n
\n

Map series-treemap.data.id to color.

\n

Since id is used to identify node, if user call setOption to modify the tree, each node will remain the original color before and after setOption called. See this example.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorMappingBy attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"enum","options":"index,value,id"},"default":"'index'"},"visibleMin":{"type":["number"],"description":"\n\n

A node will not be shown when its area size is smaller than this value (unit: px square).

\n

In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, visibleMin attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"number","default":"10","min":"0"},"default":10},"childrenVisibleMin":{"type":["number"],"description":"\n\n

Children will not be shown when area size of a node is smaller than this value (unit: px square).

\n

This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, childrenVisibleMin attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"number","default":"10","min":"0","step":"0.5"},"default":null},"label":{"type":["Object"],"description":"

label describes the style of the label in each node.

\n
\n

Tps: In treemap, label attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"upperLabel":{"type":["Object"],"description":"

upperLabel is used to specify whether show label when the node has children. When upperLabel.show is set as true, the feature that "show parent label" is enabled.

\n

The same as series-treemap.label, the option upperLabel can be placed at the root of series-treemap directly, or in series-treemap.level, or in each item of series-treemap.data.

\n

Specifically, series-treemap.label specifies the style when a node is a leaf, while upperLabel specifies the style when a node has children, in which case the label is displayed in the inner top of the node.

\n

See:

\n\n\n\n\n\n
\n

Tps: In treemap, label attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of label area.

\n","uiControl":{"type":"number","default":"20","min":"0","step":"0.5"},"default":20},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"
\n

Tps: In treemap, itemStyle attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null},"borderRadius":{"type":["number","Array"],"description":"\n\n

Border radius.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB","clean":"true"},"default":0},"borderWidth":{"type":["number"],"description":"\n\n

The border width of a node. There is no border when it is set as 0.

\n

Tip, gaps between child nodes are specified by gapWidth

\n","uiControl":{"type":"number","step":"0.5","min":"0"},"default":0},"gapWidth":{"type":["number"],"description":"\n\n

Gaps between child nodes.

\n","uiControl":{"type":"number","step":"0.5","min":"0"},"default":0},"borderColor":{"type":["Color"],"description":"\n\n

The border color and gap color of a node.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"\n\n

The color saturation of a border or gap. The value range is between 0 ~ 1.

\n

Tips:

\n

When borderColorSaturation is set, the borderColor is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be specified explicitly or inherited from its parent node) and mixing with borderColorSaturation.

\n

In this way, a effect can be implemented: different sections have different hue of gap color respectively, which makes users easy to distinguish both sections and levels.

\n

How to avoid confusion by setting border/gap of node

\n

If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.

\n

See the example. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use borderColorSaturation to lift the saturation.

\n","uiControl":{"type":"number","step":"0.01","min":"0","max":"1","default":"0.5"},"default":null},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}}}}},"data":{"type":["Array"],"description":"

the the data format of series-treemap.data is a forest. For example:

\n
[ // Tips, the top level is an array.\n    {\n        value: 1212,\n        children: [\n            {\n                value: 2323,    // The value of this node, indicating the area size.\n                                // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.\n                                // The other items of the array can be used for extra visual mapping. See details in series-treemap.levels.\n                id: 'someid-1', // id is not mandatory.\n                                // But if using API, id is used to locate node.\n                name: 'description of this node', // show the description text in rectangle.\n                children: [...],\n                label: {        // The label config of this node (if necessary).\n                    ...         // see series-treemap.label.\n                },\n                itemStyle: {    // the itemStyle of this node (if necessary).\n                    ...         // the see series-treemap.itemStyle.\n                }\n            },\n            {\n                value: 4545,\n                id: 'someid-2',\n                name: 'description of this node',\n                children: [\n                    {\n                        value: 5656,\n                        id: 'someid-3',\n                        name: 'description of this node',\n                        children: [...]\n                    },\n                    ...\n                ]\n            }\n        ]\n    },\n    {\n        value: [23, 59, 12]\n        // if there is no children, here could be nothing.\n    },\n    ...\n]\n
\n","items":{"type":"Object","properties":{"value":{"type":["number","Array"],"description":"

The value of this node, indicating the area size.

\n

It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.

\n

The other items of the array can be used for extra visual mapping. See details in series-treemap.levels.

\n"},"id":{"type":["string"],"description":"

id is not mandatory.\nBut if using API, id is used to locate node.

\n"},"name":{"type":["string"],"description":"

Show the description text in rectangle.

\n"},"visualDimension":{"type":["number"],"description":"

treemap is able to map any dimensions of data to visual.

\n

The value of series-treemap.data can be an array. And each item of the array represents a "dimension". visualDimension specifies the dimension on which visual mapping will be performed.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, visualDimension attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":0},"visualMin":{"type":["number"],"description":"\n\n

The minimal value of current level. Auto-statistics by default.

\n

When colorMappingBy is set to 'value', you are able to specify extent manually for visual mapping by specifying visualMin or visualMax.

\n","uiControl":{"type":"number","default":"0"},"default":null},"visualMax":{"type":["number"],"description":"\n\n

The maximal value of current level. Auto-statistics by default.

\n

When colorMappingBy is set to 'value', you are able to specify extent manually for visual mapping by specifying visualMin or visualMax.

\n","uiControl":{"type":"number","default":"100"},"default":null},"color":{"type":["Array"],"description":"

A color list for a level. Each node in the level will obtain a color from the color list (the rule see colorMappingBy). It is empty by default, which means the global color list will be used.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, color attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n"},"colorAlpha":{"type":["Array"],"description":"

It indicates the range of transparent rate (color alpha) for nodes in a level

\n

.\nThe range of values is 0 ~ 1.

\n

For example, colorAlpha can be [0.3, 1].

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorAlpha attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":null},"colorSaturation":{"type":["number"],"description":"

It indicates the range of saturation (color alpha) for nodes in a level.

\n

The range of values is 0 ~ 1.

\n

For example, colorSaturation can be [0.3, 1].

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorSaturation attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","default":null},"colorMappingBy":{"type":["string"],"description":"\n\n

Specify the rule according to which each node obtain color from color list. Optional values:

\n
    \n
  • 'value':
    • \n
\n

Map series-treemap.data.value to color.

\n

In this way, the color of each node indicate its value.

\n

visualDimension can be used to specify which dimension of data is used to perform visual mapping.

\n
    \n
  • 'index':
    • \n
\n

Map the index (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of color list, and the second node gets the second color.

\n

In this way, adjacent nodes are distinguished by color.

\n
    \n
  • 'id':
    • \n
\n

Map series-treemap.data.id to color.

\n

Since id is used to identify node, if user call setOption to modify the tree, each node will remain the original color before and after setOption called. See this example.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, colorMappingBy attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"enum","options":"index,value,id"},"default":"'index'"},"visibleMin":{"type":["number"],"description":"\n\n

A node will not be shown when its area size is smaller than this value (unit: px square).

\n

In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, visibleMin attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"number","default":"10","min":"0"},"default":10},"childrenVisibleMin":{"type":["number"],"description":"\n\n

Children will not be shown when area size of a node is smaller than this value (unit: px square).

\n

This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.

\n

About visual encoding, see details in series-treemap.levels.

\n
\n

Tps: In treemap, childrenVisibleMin attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","uiControl":{"type":"number","default":"10","min":"0","step":"0.5"},"default":null},"label":{"type":["Object"],"description":"

label describes the style of the label in each node.

\n
\n

Tps: In treemap, label attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"upperLabel":{"type":["Object"],"description":"

upperLabel is used to specify whether show label when the node has children. When upperLabel.show is set as true, the feature that "show parent label" is enabled.

\n

The same as series-treemap.label, the option upperLabel can be placed at the root of series-treemap directly, or in series-treemap.level, or in each item of series-treemap.data.

\n

Specifically, series-treemap.label specifies the style when a node is a leaf, while upperLabel specifies the style when a node has children, in which case the label is displayed in the inner top of the node.

\n

See:

\n\n\n\n\n\n
\n

Tps: In treemap, label attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of label area.

\n","uiControl":{"type":"number","default":"20","min":"0","step":"0.5"},"default":20},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"
\n

Tps: In treemap, itemStyle attribute could appear in more than one places:

\n
\n
\n
    \n
  • It could appear in sereis-treemap, indicating the unified setting of the series.
    • \n
\n
\n
\n
    \n
  • It could appear in each array element of series-treemap.levels, indicating the unified setting of each level of the tree.
    • \n
\n
\n
\n
    \n
  • It could appear in each node of series-treemap.data, indicating the particular setting of each node.
    • \n
\n
\n","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null},"borderRadius":{"type":["number","Array"],"description":"\n\n

Border radius.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB","clean":"true"},"default":0},"borderWidth":{"type":["number"],"description":"\n\n

The border width of a node. There is no border when it is set as 0.

\n

Tip, gaps between child nodes are specified by gapWidth

\n","uiControl":{"type":"number","step":"0.5","min":"0"},"default":0},"gapWidth":{"type":["number"],"description":"\n\n

Gaps between child nodes.

\n","uiControl":{"type":"number","step":"0.5","min":"0"},"default":0},"borderColor":{"type":["Color"],"description":"\n\n

The border color and gap color of a node.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"\n\n

The color saturation of a border or gap. The value range is between 0 ~ 1.

\n

Tips:

\n

When borderColorSaturation is set, the borderColor is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be specified explicitly or inherited from its parent node) and mixing with borderColorSaturation.

\n

In this way, a effect can be implemented: different sections have different hue of gap color respectively, which makes users easy to distinguish both sections and levels.

\n

How to avoid confusion by setting border/gap of node

\n

If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.

\n

See the example. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use borderColorSaturation to lift the saturation.

\n","uiControl":{"type":"number","step":"0.01","min":"0","max":"1","default":"0.5"},"default":null},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treeAncestors: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

The color of a node. It use global palette option.color by default.

\n","uiControl":{"type":"color"},"default":null}}}}},"link":{"type":["string"],"description":"

Enable hyperlink jump when clicking on node. It is available when series-treemap.nodeClick is 'link'.

\n

See series-treemap.data.target.

\n"},"target":{"type":["string"],"description":"

The same meaning as target in html <a> label, See series-treemap.data.link. Option values are: 'blank' or 'self'.

\n","default":"'blank'"},"children":{"type":["Array"],"description":"

child nodes, recursive definition, configurations are the same as series-treemap.data.

\n"},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"cursor":{"type":["string"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"}}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1500","step":"20","clean":"true"},"default":1500},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"quinticInOut"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"cursor":{"type":["string"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"}}},{"type":["Object"],"description":"

Sunburst Chart is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as Pie charts, and also level relation as Treemap charts.

\n

For example:

\n\n\n\n\n\n\n

Data Drilling

\n

The sunburst chart supports data drilling by default, which means when a user clicks a sector, it will be used as the root node, and there will be a circle in the center used to return to the parent node. If data drilling is not needed, it can be disabled by series-sunburst.nodeClick.

\n","properties":{"type":{"type":["string"],"description":"","default":"'sunburst'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"center":{"type":["Array"],"description":"\n\n

Center position of Sunburst chart, the first of which is the horizontal position, and the second is the vertical position.

\n

Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.

\n

Example:

\n
// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n
","uiControl":{"type":"percentvector","dims":"x,y"},"default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"\n\n

Radius of Sunburst chart. Value can be:

\n
    \n
  • number: Specify outside radius directly.
    • \n
  • string: For example, '20%', means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).
    • \n
\n
    \n
  • Array.<number|string>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.
    • \n
\n","uiControl":{"type":"percentvector","dims":"inner,outer","default":"0%, 75%"},"default":"[0, '75%']"},"data":{"type":["Array"],"description":"

The data structure of series-sunburst.data is like tree. For example:

\n
[{\n    name: 'parent1',\n    value: 10,          // value of parent node can be left unset, and sum of\n                        // children values will be used in this case.\n                        // If is set, and is larger than sum of children nodes,\n                        // the reset can be used for other parts in parent.\n    children: [{\n        value: 5,\n        name: 'child1',\n        children: [{\n            value: 2,\n            name: 'grandchild1',\n            itemStyle: {\n                // every data can have its own itemStyle,\n                // which will overwrites series.itemStyle and level.itemStyle\n            },\n            label: {\n                // label style, the same to above\n            }\n        }]\n    }, {\n        value: 3,\n        name: 'child2'\n    }],\n    itemStyle: {\n        // itemStyle of parent1, which will not be inherited for children\n    },\n    label: {\n        // label of parent1, which will not be inherited for children\n    }\n}, {\n    name: 'parent2',\n    value: 4\n}]\n
\n","items":{"type":"Object","properties":{"value":{"type":["number"],"description":"

Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.

\n"},"name":{"type":["string"],"description":"

Name displayed in each sector.

\n"},"link":{"type":["string"],"description":"

Link address that redirects to when this sector is clicked. Only useful when series-sunburst.nodeClick is set to be 'link'.

\n

See series-sunburst.data.target.

\n"},"target":{"type":["string"],"description":"

Like target attribute of HTML <a>, which can either be 'blank' or 'self'. See series-sunburst.data.link.

\n","default":"'blank'"},"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}},"emphasis":{"type":["*"],"description":"

Emphasis state.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"blur":{"type":["*"],"description":"

Blur state.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"select":{"type":["*"],"description":"

Select state.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"children":{"type":["Array"],"description":"

The children nodes defined recursively. The structure is the same as series-sunburst.data.

\n"},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"nodeClick":{"type":["boolean","string"],"description":"\n\n

The action of clicking a sector, which can be:

\n
    \n
  • false: nothing happens.
    • \n
  • 'rootToNode': use the clicked sector as root.
    • \n
  • 'link'：if link is set, the page will redirect to it.
    • \n
\n","uiControl":{"type":"enum","default":"rootToNode","options":"rootToNode,link"},"default":"'rootToNode'"},"sort":{"type":["string","Function"],"description":"\n\n

Sorting method that sectors use based on value, which is the sum of children when not set. The default value 'desc' states for descending order, while it can also be set to be 'asc' for ascending order, or null for not sorting, or callback function like:

\n
function(nodeA, nodeB) {\n    return nodeA.getValue() - nodeB.getValue();\n}\n
\n","uiControl":{"type":"enum","default":"desc","options":"desc,asc"},"default":"'desc'"},"renderLabelForZeroData":{"type":["boolean"],"description":"\n\n

If there is no name, whether need to render it.

\n","uiControl":{"type":"boolean"},"default":false},"clockwise":{"type":["boolean"],"description":"\n\n

Whether the layout of sectors of sunburst chart is clockwise.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"startAngle":{"type":["number"],"description":"\n\n

The start angle, which range is [0, 360].

\n","uiControl":{"type":"angle","step":"1","min":"0","max":"360","default":"90"},"default":90},"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n\n\n\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}},"emphasis":{"type":["*"],"description":"

Configurations of emphasis state.

\n","properties":{"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n
    \n
  • 'ancestor' Focus on all ancestor nodes.
    • \n
  • 'descendant' Focus on all descendants nodes.
    • \n
\n
    \n
  • 'relative' Focus on all ancestor and descendants nodes. (Since v5.6.0)
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"blur":{"type":["*"],"description":"

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"select":{"type":["*"],"description":"

Configurations of select state. Available when selectedMode is set.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"levels":{"type":["Array"],"description":"

Multiple levels

\n

Sunburst chart has a leveled structure. To make it convenient, we provide a levels option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.

\n

For example, if we don't want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:

\n
series: {\n    // ...\n    levels: [\n        {\n            // Blank setting for data mining\n        },\n        {\n            // The most inside level\n            itemStyle: {\n                color: 'red'\n            },\n            label: {\n                color: 'blue'\n            }\n        },\n        {\n            // The second level\n        }\n    ]\n}\n
\n","items":{"type":"Object","properties":{"radius":{"type":["Array"],"description":"
\n

Since v5.2.0

\n
\n

The inner and outer radius of the current layer, noting that the radius of other layers will not be adaptive.

\n"},"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}},"emphasis":{"type":["*"],"description":"

Emphasis state.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"blur":{"type":["*"],"description":"

Blur state.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}},"select":{"type":["*"],"description":"

Select state.

\n","properties":{"label":{"type":["Object"],"description":"

To specify the style of the label of the sector.

\n

Priority：series.data.label > series.levels.label > series.label。

\n

Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"rotate":{"type":["string","number"],"description":"

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n

The following example shows different rotate settings:

\n\n\n","default":"'radial'"},"align":{"type":["string"],"description":"\n\n

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

\n

Same to label.align

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"minAngle":{"type":["number"],"description":"\n\n

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

\n","uiControl":{"type":"angle","min":"0","step":"1","max":"360"},"default":null},"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The ancestors of current node (including self)\n    treePathInfo: Array\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

To specify the style of the sector of the sunburst chart.

\n

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

\n

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'white'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"},"default":1},"borderRadius":{"type":["number","string","Array"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

\n

Since v5.3.0, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.

\n

For example:

\n

Before v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius and the outer corner radius is 50% of the outer radius.
    • \n
\n

Since v5.3.0:

\n
    \n
  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
    • \n
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius and outer corner radius is 20% of the outer radius.
    • \n
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
    • \n
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the difference between the inner sector and the outer sector, and the outer corner radius is 50% of the difference.
    • \n
  • borderRadius: [5, 10, 15, 20]: means the two inner corner radii are 5px and 10px, and the two outer corner radii are 15px and 20px.
    • \n
\n","uiControl":{"type":"percentvector","min":"0","dims":"InnerStart,InnerEnd,OuterStart,OuterEnd","default":"0,0,0,0"}}}}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":500},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},{"type":["Object"],"description":"

Boxplot is a convenient way of graphically depicting groups of numerical data through their quartiles.

\n

Example:

\n\n\n\n


\nMultiple series can be displayed in the same coordinate system. Please refer to this example.

\n


\n

\n","properties":{"type":{"type":["string"],"description":"","default":"'boxplot'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"layout":{"type":["string"],"description":"

Layout methods, whose optional values are:

\n
    \n

  • 'horizontal': horizontally layout all boxes.

    \n
    • \n

  • 'vertical': vertically layout all boxes.

    \n
    • \n
\n

The default value is decided by:

\n
    \n
  • if there is a category axis:
      \n
    • if it is horizontal, use 'horizontal';
      • \n
    • otherwise use 'vertical';
      • \n
    \n
    • \n
  • otherwise use 'horizontal'.
    • \n
\n","default":null},"boxWidth":{"type":["Array"],"description":"\n\n

Up and bottom boundary of box width. The array is in the form of [min, max].

\n

It could be absolute value in pixel, such as [7, 50], or percentage, such as ['40%', '90%']. The percentage means the percentage to the maximum possible width.

\n","uiControl":{"type":"percentvector","default":"7,50","min":"0","dims":"min,max"},"default":"[7, 50]"},"itemStyle":{"type":["Object"],"description":"

Style of boxplot.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#fff"},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#fff"},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"2","min":"0","step":"0.5"},"default":2},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":"rgba(0,0,0,0.2)"},"default":"rgba(0,0,0,0.2)"},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"1","step":"0.5"},"default":1},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"1","step":"0.5"},"default":1},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data should be the two-dimensional array shown as follow.

\n
[\n    [655, 850, 940, 980, 1175],\n    [672.5, 800, 845, 885, 1012.5],\n    [780, 840, 855, 880, 940],\n    [621.25, 767.5, 815, 865, 1011.25],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [713.75, 807.5, 810, 870, 963.75],\n        itemStyle: {...}\n    },\n    ...\n]\n
\n

Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:

\n
[min,  Q1,  median (or Q2),  Q3,  max]\n
\n

Data Processing

\n

ECharts doesn't contain data processing modules, so the five statistic values should be calculated by yourself and then passes into boxplot.

\n

However, ECharts also provide some simple raw data processing tools. For example, this example uses echarts.dataTool.prepareBoxplotData to proceed simple data statistics.

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of data item.

\n"},"value":{"type":["Array"],"description":"

Value of data item.

\n
[min,  Q1,  median (or Q2),  Q3,  max]\n
\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of a single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n

It works only if areaStyle is set.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of a single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of single data.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

boxplot color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

boxplot border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

boxplot border width. No border when it is set to be 0.

\n

boxplot border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

boxplot border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Boxplot .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Boxplot , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"800","step":"20","clean":"true"},"default":800},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"elasticOut"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

A candlestick chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.

\n

ECharts3 supports both 'candlestick' and 'k' in series.type ('k' would automatically turns into 'candlestick').

\n

An example:

\n\n\n\n\n


\nAbout color of increase and decrease

\n

Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.

\n

We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.

\n\n


\n

\n","properties":{"type":{"type":["string"],"description":"","default":"'candlestick'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"layout":{"type":["string"],"description":"

Layout method, whose values may be:

\n
    \n

  • 'horizontal': horizontally layout all boxs.

    \n
    • \n

  • 'vertical': vertically layout all boxs.

    \n
    • \n
\n

The default value is decided by:

\n
    \n
  • if there is a category axis:
      \n
    • if it is horizontal, use 'horizontal';
      • \n
    • otherwise use 'vertical';
      • \n
    \n
    • \n
  • otherwise use 'horizontal'.
    • \n
\n","default":null},"barWidth":{"type":["number"],"description":"\n\n

Specify bar width. Absolute value (like 10) or percentage (like '20%', according to band width) can be used. Auto adapt by default.

\n","uiControl":{"type":"percent","default":"70%","min":"0"}},"barMinWidth":{"type":["number","string"],"description":"

Specify bar min width. Absolute value (like 10) or percentage (like '20%', according to band width) can be used. Auto adapt by default.

\n"},"barMaxWidth":{"type":["number","string"],"description":"

Specify bar max width. Absolute value (like 10) or percentage (like '20%', according to band width) can be used. Auto adapt by default.

\n"},"itemStyle":{"type":["Object"],"description":"

Item style of candlestick.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#eb5454"},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#47b262"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#eb5454"},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#47b262"},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"1"},"default":1},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

Emphasis style of candlestick.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"2"},"default":2},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.6.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"2"},"default":2},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.6.0

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":"2"},"default":2},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"large":{"type":["boolean"],"description":"\n\n

Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.

\n

After being enabled, largeThreshold can be used to indicate the minimum number for turning on the optimization.

\n

But when the optimization enabled, the style of single data item can't be customized any more.

\n","uiControl":{"type":"boolean"},"default":true},"largeThreshold":{"type":["number"],"description":"\n\n

The threshold enabling the drawing optimization.

\n","uiControl":{"type":"number","min":"1","default":"600"},"default":600},"progressive":{"type":["number"],"description":"

progressive specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.

\n

When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.

\n

Set progressive: 0 to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than progressiveThreshold.

\n","default":3000},"progressiveThreshold":{"type":["number"],"description":"

If current data amount is over the threshold, "progressive rendering" is enabled.

\n","default":10000},"progressiveChunkMode":{"type":["string"],"description":"

Chunk approach, optional values:

\n
    \n
  • 'sequential': slice data by data index.
    • \n
  • 'mod': slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.
    • \n
\n","default":"mod"},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data should be the two-dimensional array shown as follows.

\n
[\n    [2320.26, 2320.26, 2287.3,  2362.94],\n    [2300,    2291.3,  2288.26, 2308.38],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [2300,    2291.3,  2288.26, 2308.38],\n        itemStyle: {...}\n    },\n    ...\n]\n
\n

Every data item (each line in the example above) represents a box, which contains 4 values. They are:

\n
[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of data item.

\n"},"value":{"type":["Array"],"description":"

Value of data item.

\n
[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n
\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of a candle box.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":""}},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis style of a candle box.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":""}},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of single data.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":""}},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Fill color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"color0":{"type":["Color"],"description":"\n\n\n\n

Fill color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor":{"type":["Color"],"description":"\n\n

Border color of bullish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColor0":{"type":["Color"],"description":"\n\n\n\n

Border color of bearish candle stick.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"}},"borderColorDoji":{"type":["Color"],"description":"\n\n\n\n
\n

Since v5.4.1

\n
\n

Border color of doji (when the open price is the same as the close price).

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderWidth":{"type":["number"],"description":"\n\n

Border width of candlestick. There is no border when it is 0.

\n","uiControl":{"type":"number","min":"0","step":"0.5","default":""}},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.5.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Candlestick .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Candlestick , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"300","step":"20","clean":"true"},"default":300},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"linear"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

heat map

\n

Heat map mainly use colors to represent values, which must be used along with visualMap component.

\n

It can be used in either rectangular coordinate or geographic coordinate. But the behaviour on them are quite different. Rectangular coordinate must have two categories to use it.

\n

Here are the examples using it in rectangular coordinate and geographic coordinate:

\n

rectangular coordinate:

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'heatmap'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n
    \n

  • 'calendar'

    \n

    Use calendar coordinates, with calendarIndex to assign the corresponding calendar coordinate components.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"geoIndex":{"type":["number"],"description":"

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"calendarIndex":{"type":["number"],"description":"

Index of calendar coordinates to combine with, which is useful for multiple calendar coordinates in one chart.

\n","default":0},"pointSize":{"type":["number"],"description":"

Point size of each data point. It is valid with coordinateSystem of 'geo' value.

\n","default":20},"blurSize":{"type":["number"],"description":"

Blur size of each data point. It is valid with coordinateSystem of 'geo' value.

\n","default":20},"minOpacity":{"type":["number"],"description":"

Minimum opacity. It is valid with coordinateSystem of 'geo' value.

\n","default":0},"maxOpacity":{"type":["number"],"description":"

Maximum opacity. It is valid with coordinateSystem of 'geo' value.

\n","default":1},"progressive":{"type":["number"],"description":"

progressive specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.

\n

When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.

\n

Set progressive: 0 to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than progressiveThreshold.

\n","default":400},"progressiveThreshold":{"type":["number"],"description":"

If current data amount is over the threshold, "progressive rendering" is enabled.

\n","default":3000},"label":{"type":["Object"],"description":"

Work for coordinateSystem: 'cartesian2d'.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

Work for coordinateSystem: 'cartesian2d'.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","Array"],"description":"
\n

Since v5.3.1

\n
\n\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of data item.

\n"},"value":{"type":["Array"],"description":"

Value of data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"label":{"type":["Object"],"description":"

It is valid with coordinateSystem of 'cartesian2d' value.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of a single data point. It is valid with coordinateSystem of 'cartesian2d' value.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"borderRadius":{"type":["number","Array"],"description":"
\n

Since v5.3.1

\n
\n\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n
data: [\n\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in heatmap.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in heatmap, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Map.

\n

Map is mainly used in the visualization of geographic area data, which can be used with visualMap component to visualize the data such as population distribution density in different areas.

\n

Series of same map type will show in one map. At this point, the configuration of the first series will be used for the map configuration.

\n","properties":{"type":{"type":["string"],"description":"","default":"'map'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"map":{"type":["string"],"description":"

Map name registered in registerMap.

\n

Use geoJSON

\n
$.get('map/china_geo.json', function (geoJson) {\n    echarts.registerMap('china', {geoJSON: geoJson});\n    var chart = echarts.init(document.getElementById('main'));\n    chart.setOption({\n        series: [{\n            type: 'map',\n            map: 'china',\n            ...\n        }]\n    });\n});\n
\n

See also USA Population Estimates.

\n

The demo above shows that ECharts can uses geoJSON format as map outline. You can use third-party geoJSON data (like maps) and register them into ECharts.

\n

Use SVG

\n
$.get('map/topographic_map.svg', function (svg) {\n    echarts.registerMap('topo', {svg: svg});\n    var chart = echarts.init(document.getElementById('main'));\n    chart.setOption({\n        series: [{\n            type: 'map',\n            map: 'topo',\n            ...\n        }]\n    });\n});\n
\n

See also Beef Cuts.

\n

The demo above shows that SVG format can be used in ECharts. See more info in SVG Base Map.

\n","default":"''"},"roam":{"type":["boolean","string"],"description":"\n\n

Whether to enable mouse zooming and translating. false by default. If either zooming or translating is wanted, it can be set to 'scale' or 'move'. Otherwise, set it to be true to enable both.

\n","uiControl":{"type":"enum","options":"true,false,scale,move"},"default":false},"projection":{"type":["Object"],"description":"
\n

Since v5.3.0

\n
\n

For custom map projection, at least two methods project, unproject should be provided to calculate the coordinates after projection and before projection respectively.

\n

For example, for the Mercator projection.

\n
series: {\n    type: 'map',\n    projection: {\n        project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],\n        unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]\n    }\n}\n
\n

In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as d3-geo.

\n
const projection = d3.geoConicEqualArea();\n// ...\nseries: {\n    type: 'map',\n    projection: {\n        project: (point) => projection(point),\n        unproject: (point) => projection.invert(point)\n    }\n}\n\n
\n

Note: Custom projections are only useful when using GeoJSON as a data source.

\n","properties":{"project":{"type":["Function"],"description":"
(coord: [number, number]) => [number, number]\n
\n

Projection of latitude and longitude coordinates to other coordinates.

\n"},"unproject":{"type":["Function"],"description":"
(point: [number, number]) => [number, number]\n
\n

Calculate the raw latitude and longitude coordinates from the projected coordinates

\n"},"stream":{"type":["Function"],"description":"

This property is mainly used to adapt the stream interface used in d3-geo. After introducing stream, you can introduce both the Antimeridian Clipping and Adaptive Sampling algorithms implemented in d3-geo.

\n
const projection = d3.geoProjection((x, y) => ([x, y / 0.75]))\n    .rotate([-115, 0]);\n// ...\nseries: {\n    type: 'map',\n    projection: {\n        // We still need project and unproject when stream is provided.\n        project: (point) => projection(point),\n        unproject: (point) => projection.invert(point),\n        // We can directly use the stream method in d3 projection.\n        stream: projection.stream\n    }\n}\n
\n

Note: stream is not required in the projection.

\n"}}},"center":{"type":["Array"],"description":"

Center of current view-port. It can be an array containing two numbers in pixels or strings in percentage relative to the container width/height.\nstring is supported from version 5.3.3.

\n

Example:

\n
center: [115.97, '30%']\n
\n"},"aspectScale":{"type":["number"],"description":"

Used to scale aspect of geo. Will be ignored if projection is set.

\n

The final aspect is calculated by: geoBoundingRect.width / geoBoundingRect.height * aspectScale.

\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"

Two dimension array. Define coord of left-top, right-bottom in layout box.

\n
// A complete world map\nmap: 'world',\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n
\n","default":null},"zoom":{"type":["number"],"description":"

Zoom rate of current view-port.

\n","default":1},"scaleLimit":{"type":["Object"],"description":"

Limit of scaling, with min and max.

\n","properties":{"min":{"type":["number"],"description":"

Minimum scaling

\n"},"max":{"type":["number"],"description":"

Maximum scaling

\n"}}},"nameMap":{"type":["Object"],"description":"

Name mapping for customized areas. For example:

\n
{\n    'China' : '中国'\n}\n
\n"},"nameProperty":{"type":["string"],"description":"
\n

Since v4.8.0

\n
\n

customized property key for GeoJSON feature. By default, 'name' is used as primary key to identify GeoJSON feature.\nFor example:

\n
{\n    nameProperty: 'NAME', // key to connect following data point to GeoJSON region {"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}\n    data:[\n        {name: 'Alabama', value: 4822023},\n        {name: 'Alaska', value: 731449},\n    ]\n}\n
\n","default":"'name'"},"selectedMode":{"type":["boolean","string"],"description":"

Selected mode decides whether multiple selecting is supported. By default, false is used for disabling selection. Its value can also be 'single' for selecting single area, or 'multiple' for selecting multiple areas.

\n","default":false},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of Map Area Border, emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"areaColor":{"type":["Color"],"description":"

Area filling color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Map area style in highlighted state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"

Map area style in selected state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","default":"'#eee'"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"top":{"type":["string","number"],"description":"

Distance between component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'auto'"},"right":{"type":["string","number"],"description":"

Distance between component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"

layoutCenter and layoutSize provides layout strategy other than left/right/top/bottom/width/height.

\n

When using left/right/top/bottom/width/height, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, layoutCenter attribute can be used to define the center position of map, and layoutSize can be used to define the size of map. For example:

\n
layoutCenter: ['30%', '30%'],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n
\n

After setting these two values, left/right/top/bottom/width/height becomes invalid.

\n","default":null},"layoutSize":{"type":["number","string"],"description":"

Size of map, see layoutCenter for more information. Percentage relative to screen width, and absolute pixel values are supported.

\n"},"geoIndex":{"type":["number"],"description":"

In default case, map series create exclusive geo component for themselves. But geoIndex can be used to specify an outer geo component, which can be shared with other series like pie. Moreover, the region color of the outer geo component can be controlled by the map series (via visualMap).

\n

When geoIndex specified, series-map.map other style configurations like series-map.itemStyle will not work, but corresponding configurations in geo component will be used.

\n

For example:

\n\n\n","default":null},"mapValueCalculation":{"type":["string"],"description":"

Value of multiple series with the same map type can use this option to get a statistical value.

\n

Supported statistical methods:

\n
    \n
  • 'sum'
    • \n
  • 'average'
    • \n
  • 'max'
    • \n
  • 'min'
    • \n
\n","default":"'sum'"},"showLegendSymbol":{"type":["boolean"],"description":"

Show the symbol in related area (dot of series symbol). Available when legend component exists.

\n"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array of map series, which can be a single data value, like:

\n
[12, 34, 56, 10, 23]\n
\n

Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:

\n
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n
\n

In this case, we can assign the second value in each array item to visualMap component.

\n

More likely, we need to assign name to each data item, in which case each item should be an object:

\n
[{\n    // name of date item\n    name: 'data1',\n    // value of date item is 8\n    value: 10\n}, {\n    name: 'data2',\n    value: 20\n}]\n
\n

Each data item can be further customized:

\n
[{\n    name: 'data1',\n    value: 10\n}, {\n    // name of data item\n    name: 'data2',\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of the map area where the data belongs to, such as 'China' or 'United Kingdom' .

\n"},"value":{"type":["number"],"description":"

The numerical value of this area.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"selected":{"type":["boolean"],"description":"

Whether the are selected.

\n","default":false},"silent":{"type":["boolean"],"description":"\n\n\n\n\n
\n

Since v5.6.0

\n
\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"itemStyle":{"type":["Object"],"description":"

Style of item polygon

\n","properties":{"areaColor":{"type":["Color"],"description":"

Color of the area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'bottom'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of specified region.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}},"select":{"type":["Object"],"description":"

Select state of polygon.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"

The color of the map area.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n
  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n
  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n
data: [\n\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n
  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).
    2. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

The series in parallel coordinate system.

\n

Introduction about Parallel coordinates

\n

Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.

\n

For example, series-parallel.data is the following data:

\n
[\n    [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n    [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n    [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n    [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, 'excellent']\n        lineStyle: {...},\n    }\n    ...\n]\n
\n

In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".

\n

Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:

\n\n\n\n\n

Brief about Configuration

\n

Basic configuration parallel coordinates is shown as follow:

\n
option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: 'category',           // Also supports category data.\n            data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: '5%',                     // Location of parallel coordinate system.\n        right: '13%',\n        bottom: '10%',\n        top: '20%',\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: 'value',\n            nameLocation: 'end',\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: 'Beijing',\n            type: 'parallel',           // The type of this series is 'parallel'\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n                [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n                ...\n            ]\n        },\n        {\n            name: 'Shanghai',\n            type: 'parallel',\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n                [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n                ...\n            ]\n        },\n        {\n            name: 'Guangzhou',\n            type: 'parallel',\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n                [5,  42,  24,  44,  0.76,  40,  16, 'excellent'],\n                ...\n            ]\n        }\n    ]\n};\n
\n

Three components are involved here: parallel, parallelAxis, series-parallel

\n
    \n

  • parallel

    \n

    This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.

    \n

    Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.

    \n

    Position setting is also carried out here.

    \n
    • \n

  • parallelAxis

    \n

    This is axis configuration. Multiple axes are needed in parallel coordinates.

    \n

    parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.

    \n
    • \n

  • series-parallel

    \n

    This is the definition of parallel series, which will be drawn on parallel coordinate system.

    \n

    parallelAxis.parallelIndex is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.

    \n
    • \n
\n

Notes and Best Practices

\n

When configuring multiple parallelAxis, there might be some common attributes in each axis configuration. To avoid writing them repeatedly, they can be put under parallel.parallelAxisDefault. Before initializing axis, configurations in parallel.parallelAxisDefault will be merged into parallelAxis to generate the final axis configuration.

\n

If data is too large and cause bad performance

\n

It is suggested to set series-parallel.lineStyle.width to be 0.5 (or less), which may improve performance significantly.

\n

Display High-Dimension Data

\n

When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.

\n

In this case, you may use parallel.axisExpandable to improve the display. See this example:

\n\n\n\n\n\n\n\n\n\n\n\n\n","exampleBaseOptions":[{"code":"\nconst dataBJ = [\n [1,55,9,56,0.46,18,6,\"Moderate\"],\n [2,25,11,21,0.65,34,9,\"Good\"],\n [3,56,7,63,0.3,14,5,\"Moderate\"],\n [4,33,7,29,0.33,16,6,\"Good\"],\n [5,42,24,44,0.76,40,16,\"Good\"],\n [6,82,58,90,1.77,68,33,\"Moderate\"],\n [7,74,49,77,1.46,48,27,\"Moderate\"],\n [8,78,55,80,1.29,59,29,\"Moderate\"],\n [9,267,216,280,4.8,108,64,\"Very Unhealthy\"],\n [10,185,127,216,2.52,61,27,\"Unhealthy\"],\n [11,39,19,38,0.57,31,15,\"Good\"],\n [12,41,11,40,0.43,21,7,\"Good\"],\n [13,64,38,74,1.04,46,22,\"Moderate\"],\n [14,108,79,120,1.7,75,41,\"Unhealthy for Sensitive Groups\"],\n [15,108,63,116,1.48,44,26,\"Unhealthy for Sensitive Groups\"],\n [16,33,6,29,0.34,13,5,\"Good\"],\n [17,94,66,110,1.54,62,31,\"Moderate\"],\n [18,186,142,192,3.88,93,79,\"Unhealthy\"],\n [19,57,31,54,0.96,32,14,\"Moderate\"],\n [20,22,8,17,0.48,23,10,\"Good\"],\n [21,39,15,36,0.61,29,13,\"Good\"],\n [22,94,69,114,2.08,73,39,\"Moderate\"],\n [23,99,73,110,2.43,76,48,\"Moderate\"],\n [24,31,12,30,0.5,32,16,\"Good\"],\n [25,42,27,43,1,53,22,\"Good\"],\n [26,154,117,157,3.05,92,58,\"Unhealthy\"],\n [27,234,185,230,4.09,123,69,\"Very Unhealthy\"],\n [28,160,120,186,2.77,91,50,\"Unhealthy\"],\n [29,134,96,165,2.76,83,41,\"Unhealthy for Sensitive Groups\"],\n [30,52,24,60,1.03,50,21,\"Moderate\"],\n [31,46,5,49,0.28,10,6,\"Good\"]\n];\n\nconst dataGZ = [\n [1,26,37,27,1.163,27,13,\"Good\"],\n [2,85,62,71,1.195,60,8,\"Moderate\"],\n [3,78,38,74,1.363,37,7,\"Moderate\"],\n [4,21,21,36,0.634,40,9,\"Good\"],\n [5,41,42,46,0.915,81,13,\"Good\"],\n [6,56,52,69,1.067,92,16,\"Moderate\"],\n [7,64,30,28,0.924,51,2,\"Moderate\"],\n [8,55,48,74,1.236,75,26,\"Moderate\"],\n [9,76,85,113,1.237,114,27,\"Moderate\"],\n [10,91,81,104,1.041,56,40,\"Moderate\"],\n [11,84,39,60,0.964,25,11,\"Moderate\"],\n [12,64,51,101,0.862,58,23,\"Moderate\"],\n [13,70,69,120,1.198,65,36,\"Moderate\"],\n [14,77,105,178,2.549,64,16,\"Moderate\"],\n [15,109,68,87,0.996,74,29,\"Unhealthy for Sensitive Groups\"],\n [16,73,68,97,0.905,51,34,\"Moderate\"],\n [17,54,27,47,0.592,53,12,\"Moderate\"],\n [18,51,61,97,0.811,65,19,\"Moderate\"],\n [19,91,71,121,1.374,43,18,\"Moderate\"],\n [20,73,102,182,2.787,44,19,\"Moderate\"],\n [21,73,50,76,0.717,31,20,\"Moderate\"],\n [22,84,94,140,2.238,68,18,\"Moderate\"],\n [23,93,77,104,1.165,53,7,\"Moderate\"],\n [24,99,130,227,3.97,55,15,\"Moderate\"],\n [25,146,84,139,1.094,40,17,\"Unhealthy for Sensitive Groups\"],\n [26,113,108,137,1.481,48,15,\"Unhealthy for Sensitive Groups\"],\n [27,81,48,62,1.619,26,3,\"Moderate\"],\n [28,56,48,68,1.336,37,9,\"Moderate\"],\n [29,82,92,174,3.29,0,13,\"Moderate\"],\n [30,106,116,188,3.628,101,16,\"Unhealthy for Sensitive Groups\"],\n [31,118,50,0,1.383,76,11,\"Unhealthy for Sensitive Groups\"]\n];\n\nconst dataSH = [\n [1,91,45,125,0.82,34,23,\"Moderate\"],\n [2,65,27,78,0.86,45,29,\"Moderate\"],\n [3,83,60,84,1.09,73,27,\"Moderate\"],\n [4,109,81,121,1.28,68,51,\"Unhealthy for Sensitive Groups\"],\n [5,106,77,114,1.07,55,51,\"Unhealthy for Sensitive Groups\"],\n [6,109,81,121,1.28,68,51,\"Unhealthy for Sensitive Groups\"],\n [7,106,77,114,1.07,55,51,\"Unhealthy for Sensitive Groups\"],\n [8,89,65,78,0.86,51,26,\"Moderate\"],\n [9,53,33,47,0.64,50,17,\"Moderate\"],\n [10,80,55,80,1.01,75,24,\"Moderate\"],\n [11,117,81,124,1.03,45,24,\"Unhealthy for Sensitive Groups\"],\n [12,99,71,142,1.1,62,42,\"Moderate\"],\n [13,95,69,130,1.28,74,50,\"Moderate\"],\n [14,116,87,131,1.47,84,40,\"Unhealthy for Sensitive Groups\"],\n [15,108,80,121,1.3,85,37,\"Unhealthy for Sensitive Groups\"],\n [16,134,83,167,1.16,57,43,\"Unhealthy for Sensitive Groups\"],\n [17,79,43,107,1.05,59,37,\"Moderate\"],\n [18,71,46,89,0.86,64,25,\"Moderate\"],\n [19,97,71,113,1.17,88,31,\"Moderate\"],\n [20,84,57,91,0.85,55,31,\"Moderate\"],\n [21,87,63,101,0.9,56,41,\"Moderate\"],\n [22,104,77,119,1.09,73,48,\"Unhealthy for Sensitive Groups\"],\n [23,87,62,100,1,72,28,\"Moderate\"],\n [24,168,128,172,1.49,97,56,\"Unhealthy\"],\n [25,65,45,51,0.74,39,17,\"Moderate\"],\n [26,39,24,38,0.61,47,17,\"Good\"],\n [27,39,24,39,0.59,50,19,\"Good\"],\n [28,93,68,96,1.05,79,29,\"Moderate\"],\n [29,188,143,197,1.66,99,51,\"Unhealthy\"],\n [30,174,131,174,1.55,108,50,\"Unhealthy\"],\n [31,187,143,201,1.39,89,53,\"Unhealthy\"]\n];\n\nconst schema = [\n {name: 'date', index: 0, text: 'Date'},\n {name: 'AQIindex', index: 1, text: 'AQI'},\n {name: 'PM25', index: 2, text: 'PM2.5'},\n {name: 'PM10', index: 3, text: 'PM10'},\n {name: 'CO', index: 4, text: ' CO'},\n {name: 'NO2', index: 5, text: 'NO2'},\n {name: 'SO2', index: 6, text: 'SO2'},\n {name: 'level', index: 7, text: 'Level'}\n];\n\nconst option = {\n color: [\n '#c23531', '#91c7ae', '#dd8668'\n ],\n legend: {\n top: 10,\n data: ['Beijing', 'Shanghai', 'Guangzhou'],\n itemGap: 20\n },\n parallelAxis: [\n {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', data: ['Good', 'Moderate', 'Unhealthy for Sensitive Groups', 'Unhealthy', 'Very Unhealthy', 'Hazardous']}\n ],\n parallel: {\n left: '5%',\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: {\n type: 'value',\n name: 'AQI Index',\n nameLocation: 'end',\n nameGap: 20,\n nameTextStyle: {\n fontSize: 12\n }\n }\n },\n series: [\n {\n name: 'Beijing',\n type: 'parallel',\n data: dataBJ\n },\n {\n name: 'Shanghai',\n type: 'parallel',\n data: dataSH\n },\n {\n name: 'Guangzhou',\n type: 'parallel',\n data: dataGZ\n }\n ]\n};\n","name":"parallel-series","title":"Parallel Series","title-en":"Parallel"}],"properties":{"type":{"type":["string"],"description":"","default":"'parallel'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'parallel'

    \n

    Use parallel coordinates, with parallelIndex to assign the corresponding parallel coordinate components.

    \n
    • \n
\n","default":"'parallel'"},"parallelIndex":{"type":["number"],"description":"

Index of parallel coordinates to combine with, which is useful for multiple parallel axes in one chart.

\n","default":0},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"lineStyle":{"type":["Object"],"description":"

Line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.45","min":"0","max":"1","step":"0.01"},"default":0.45}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"

Line style in emphasis state.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.45","min":"0","max":"1","step":"0.01"},"default":0.45}}}}},"inactiveOpacity":{"type":["number"],"description":"\n\n

When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.05","step":"0.01"},"default":0.05},"activeOpacity":{"type":["number"],"description":"\n\n

When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).

\n","uiControl":{"type":"number","min":"0","max":"1","default":"1","step":"0.01"},"default":1},"realtime":{"type":["boolean"],"description":"\n\n

Whether to update view in realtime.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"progressive":{"type":["number"],"description":"

progressive specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.

\n

When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.

\n

Set progressive: 0 to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than progressiveThreshold.

\n","default":500},"progressiveThreshold":{"type":["number"],"description":"

If current data amount is over the threshold, "progressive rendering" is enabled.

\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"

Chunk approach, optional values:

\n
    \n
  • 'sequential': slice data by data index.
    • \n
  • 'mod': slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.
    • \n
\n","default":"'sequential'"},"data":{"type":["Array"],"description":"

For example, series-parallel.data is the following data:

\n
[\n    [1,  55,  9,   56,  0.46,  18,  6,  'good'],\n    [2,  25,  11,  21,  0.65,  34,  9,  'excellent'],\n    [3,  56,  7,   63,  0.3,   14,  5,  'good'],\n    [4,  33,  7,   29,  0.33,  16,  6,  'excellent'],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, 'excellent']\n        lineStyle: {...},\n    }\n    ...\n]\n
\n

In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of a data item.

\n"},"value":{"type":["Array"],"description":"

The value of a data item.

\n"},"lineStyle":{"type":["Object"],"description":"

Line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.45","min":"0","max":"1","step":"0.01"},"default":0.45}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"

Line style in emphasis state.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.45","min":"0","max":"1","step":"0.01"},"default":0.45}}}}}}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in parallel.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in parallel, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"linear"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},{"type":["Object"],"description":"

Lines graph

\n

It is used to draw the line data with the information about "from" and "to"; and it is applied for drawing the air routes on map, which visualizes these routes.

\n

ECharts 2.x uses the markLine to draw the migrating effect, while in ECharts 3, the lines graph is recommended to be used.

\n","properties":{"type":{"type":["string"],"description":"","default":"'lines'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n","default":"'geo'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"geoIndex":{"type":["number"],"description":"

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"polyline":{"type":["boolean"],"description":"

If draw as a polyline.

\n

Default to be false. Can only draw a two end straight line.

\n

If it is set true, data.coords can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example lines-bus.

\n","default":false},"effect":{"type":["Object"],"description":"

The setting about the special effects of lines.

\n

Tips: All the graphs with trail effect should be put on a individual layer, which means that zlevel need to be different with others. And the animation (animation: false) of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the label of animation would produce unnecessary ghosts.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show special effect.

\n","default":false},"period":{"type":["number"],"description":"

The duration of special effect, which unit is second.

\n","default":4},"delay":{"type":["number","Function"],"description":"

Effect animation delay. Can be number or callback function.

\n"},"constantSpeed":{"type":["number"],"description":"

If symbol movement of special effect has a constant speed, which unit is pixel per second. period will be ignored if constantSpeed is larger than 0.

\n","default":0},"symbol":{"type":["string"],"description":"

The symbol of special effect.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

The above example uses a custom path of plane shape.

\n

Tip: Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.

\n","default":"'circle'"},"symbolSize":{"type":["Array","number"],"description":"

The symbol size of special effect, which could be set as single number such as 10. What's more, arrays could be used to describe the width and height respectively. For instance, [20, 10] indicates 20 for width and 10 for height.

\n","default":3},"color":{"type":["Color"],"description":"

The color of special effect symbol, which defaults to be same with lineStyle.color.

\n"},"trailLength":{"type":["number"],"description":"

The length of trail of special effect. The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.

\n","default":0.2},"loop":{"type":["boolean"],"description":"

Whether to loop the special effect animation.

\n","default":true},"roundTrip":{"type":["boolean"],"description":"
\n

Since v5.4.0

\n
\n

Whether to go back when the animation reach the end.

\n","default":false}}},"large":{"type":["boolean"],"description":"

Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(>=5k) .

\n

After being enabled, largeThreshold can be used to indicate the minimum number for turning on the optimization.

\n

The style of a single data item can't be customized

\n","default":true},"largeThreshold":{"type":["number"],"description":"

The threshold enabling the drawing optimization.

\n","default":2000},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n","default":"'none'"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n","default":10},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Color is taken from option.color Palette by default.

\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'self-adaptive'"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.5","min":"0","max":"1","step":"0.01"},"default":0.5},"curveness":{"type":["number"],"description":"

The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.

\n","default":0}}},"label":{"type":["Object"],"description":"

Label settings. Does not work when polyline is true.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"emphasis":{"type":["Object"],"description":"

Emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"progressive":{"type":["number"],"description":"

progressive specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.

\n

When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.

\n

Set progressive: 0 to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than progressiveThreshold.

\n","default":400},"progressiveThreshold":{"type":["number"],"description":"

If current data amount is over the threshold, "progressive rendering" is enabled.

\n","default":3000},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

The data set of lines.

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

the name of data.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"coords":{"type":["Array"],"description":"

An array includes two ore more than two coordinates. Each coordinate could be [x, y] in rectangular coordinate and [lng, lat] in geographic coordinate.

\n"},"lineStyle":{"type":["Object"],"description":"

The line style of this data item.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of a single line. Available when polyline is not true.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show label.

\n","default":false},"position":{"type":["string"],"description":"

the position of label, options:

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n
data: [\n\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in lines graph.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in lines graph, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

relation graph

\n

Graph is a diagram to represent nodes and the links connecting nodes.

\n

Example:

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'graph'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • null or 'none'

    \n

    No coordinate.

    \n
    • \n
\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'polar'

    \n

    Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n
    \n

  • 'calendar'

    \n

    Use calendar coordinates, with calendarIndex to assign the corresponding calendar coordinate components.

    \n
    • \n
\n
    \n

  • 'none'

    \n

    Do not use coordinate system.

    \n
    • \n
\n","default":null},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"polarIndex":{"type":["number"],"description":"

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

\n","default":0},"geoIndex":{"type":["number"],"description":"

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"calendarIndex":{"type":["number"],"description":"

Index of calendar coordinates to combine with, which is useful for multiple calendar coordinates in one chart.

\n","default":0},"center":{"type":["Array"],"description":"\n\n

Center of current view-port. It can be an array containing two numbers in pixels or strings in percentage relative to the container width/height.\nstring is supported from version 5.3.3.

\n

Example:

\n
center: [115.97, '30%']\n
\n","uiControl":{"type":"vector","default":"0,0","dims":"x,y"}},"zoom":{"type":["number"],"description":"\n\n

Zoom rate of current view-port.

\n","uiControl":{"type":"number","default":"1","min":"0","step":"0.1"},"default":1},"layout":{"type":["string"],"description":"\n\n

Graph layout.

\n

Options:

\n
    \n

  • 'none' No any layout, use x, y provided in node as the position of node.

    \n
    • \n

  • 'circular' Adopt circular layout, see the example Les Miserables.

    \n
    • \n

  • 'force' Adopt force-directed layout, see the example Force, the detail about configurations of layout are in graph.force

    \n
    • \n
\n","uiControl":{"type":"enum","options":"none,force,circular"},"default":"'none'"},"circular":{"type":["Object"],"description":"

Configuration about circular layout.

\n","properties":{"rotateLabel":{"type":["boolean"],"description":"\n\n

Whether to rotate the label automatically.

\n","uiControl":{"type":"boolean"},"default":false}}},"force":{"type":["Object"],"description":"

Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.

\n

The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.

\n","properties":{"initLayout":{"type":["string"],"description":"

The initial layout before force-directed layout, which will influence on the result of force-directed layout.

\n

It defaults not to do any layout and use x, y provided in node as the position of node. If it doesn't exist, the position will be generated randomly.

\n

You can also use circular layout 'circular'.

\n"},"repulsion":{"type":["Array","number"],"description":"\n\n

The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.

\n

It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.

\n","uiControl":{"type":"number","min":"0","step":"5","default":"50"},"default":50},"gravity":{"type":["number"],"description":"\n\n

The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.

\n","uiControl":{"type":"number","min":"0","step":"0.01","default":"0.1"},"default":0.1},"edgeLength":{"type":["Array","number"],"description":"\n\n

The distance between 2 nodes on edge. This distance is also affected by repulsion.

\n

It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.

\n","uiControl":{"type":"number","min":"0","step":"5","default":"30"},"default":30},"layoutAnimation":{"type":["boolean"],"description":"\n\n

Because the force-directed layout will be steady after several iterations, this parameter will be decide whether to show the iteration animation of layout. It is not recommended to be closed on browser when there are a lot of node data (>100) as the layout process will cause browser to hang.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"friction":{"type":["number"],"description":"\n\n\n\n
\n

Since v4.5.0

\n
\n

It will slow down the nodes' movement. The value range is from 0 to 1.

\n

But it is still an experimental option, see #11024.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0.6"},"default":0.6}}},"roam":{"type":["boolean","string"],"description":"\n\n

Whether to enable mouse zooming and translating. false by default. If either zooming or translating is wanted, it can be set to 'scale' or 'move'. Otherwise, set it to be true to enable both.

\n","uiControl":{"type":"enum","options":"true,false,scale,move"},"default":false},"scaleLimit":{"type":["Object"],"description":"

Limit of scaling, with min and max.

\n","properties":{"min":{"type":["number"],"description":"

Minimum scaling

\n"},"max":{"type":["number"],"description":"

Maximum scaling

\n"}}},"nodeScaleRatio":{"type":["number"],"description":"\n\n

Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0.6"},"default":0.6},"draggable":{"type":["boolean"],"description":"\n\n

If node is draggable.

\n

Note that this option is only available when using force-directed layout before v5.4.1.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"symbol":{"type":["string"],"description":"\n\n

Symbol of node.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

node symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of node symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of node symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"edgeSymbol":{"type":["Array","string"],"description":"

Symbol of two ends of edge line.

\n

For example:

\n
edgeSymbol: ['circle', 'arrow']\n
\n","default":"['none', 'none']"},"edgeSymbolSize":{"type":["Array","number"],"description":"\n\n

Size of symbol of two ends of edge line. Can be an array or a single number.

\n

For example:

\n
// Start symbol has size 5 and end symbol has size 10\nedgeSymbolSize: [5, 10],\n// All has size 10\nedgeSymbolSize: 10\n
\n","uiControl":{"type":"vector","min":"0","default":"10"},"default":10},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"

The style of edge line. lineStyle.color can be 'source' or 'target', which will use the color of source node or target node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#aaa'"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"0.5","min":"0","max":"1","step":"0.01"},"default":0.5},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

If show label on edge.

\n","default":false},"position":{"type":["string"],"description":"

Label position, options：

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean","number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Whether to scale to highlight the node in emphasis state. number has been supported since v5.3.2, the default scale value is 1.1.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n
    \n
  • 'adjacency' Focus on the elements of adjacent nodes and edges in the graph.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

If show label on edge.

\n","default":false},"position":{"type":["string"],"description":"

Label position, options：

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

If show label on edge.

\n","default":false},"position":{"type":["string"],"description":"

Label position, options：

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

If show label on edge.

\n","default":false},"position":{"type":["string"],"description":"

Label position, options：

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"categories":{"type":["Array"],"description":"

The categories of node, which is optional.\nIf there is a classification of nodes, the category of each node can be assigned through data[i].category. And the style of category will also be applied to the style of nodes. categories can also be used in legend.

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of category, which is used to correspond with legend and the content of tooltip.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of node of this category.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

node of this category symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of node of this category symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

The style of node in this category.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

The label style of node in this category.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of nodes in this category.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of nodes in this category.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of nodes in this category.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}},"autoCurveness":{"type":["boolean","number","Array"],"description":"

For the situation where there are multiple links between nodes, the curveness of each link is automatically calculated, not enabled by default.

\n

When set to true, it enables automatic curvature calculation. The default edge curveness array length is 20, if the number of edges between two nodes is more than 20, please use number or Array to set the edge curveness array.

\n

When set to number, it indicates the length of the edge curveness array between two nodes, and the calculation result is given by the internal algorithm.

\n

When set to Array, it means that the curveness array is directly specified, and the multilateral curveness is directly selected from the array.

\n

Notice： if lineStyle.curveness has been set, this property is invalid.

\n","default":false},"data":{"type":["Array"],"description":"

Nodes list of graph.

\n
data: [{\n    name: '1',\n    x: 10,\n    y: 10,\n    value: 10\n}, {\n    name: '2',\n    x: 100,\n    y: 100,\n    value: 20,\n    symbolSize: 20,\n    itemStyle: {\n        color: 'red'\n    }\n}]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of data item.

\n"},"x":{"type":["number"],"description":"

x value of node position.

\n"},"y":{"type":["number"],"description":"

y value of node position.

\n"},"fixed":{"type":["boolean"],"description":"

If node are fixed when doing force directed layout.

\n"},"value":{"type":["number","Array"],"description":"

Value of data item.

\n"},"category":{"type":["number"],"description":"

Index of category which the data item belongs to.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of node of this category.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

node of this category symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of node of this category symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

The label style of this node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of specified node.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of specified node.

\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of specified node.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"nodes":{"type":["Array"],"description":"

Alias of data

\n"},"links":{"type":["Array"],"description":"

Relational data between nodes. Example:

\n
links: [{\n    source: 'n1',\n    target: 'n2'\n}, {\n    source: 'n2',\n    target: 'n3'\n}]\n
\n","items":{"type":"Object","properties":{"source":{"type":["string","number"],"description":"

A string representing the name of source node on edge. Can also be a number representing the node index.

\n"},"target":{"type":["string","number"],"description":"

A string representing the name of target node on edge. Can also be a number representing node index.

\n"},"value":{"type":["number"],"description":"

value of edge, can be mapped to edge length in force graph.

\n"},"lineStyle":{"type":["Object"],"description":"

Line style of edges.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

If show label on edge.

\n","default":false},"position":{"type":["string"],"description":"

Label position, options：

\n
    \n
  • 'start'
    • \n
  • 'middle'
    • \n
  • 'end'
    • \n
\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of specified edge.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of specified edge.

\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of specified edge.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"symbol":{"type":["Array","string"],"description":"

Symbol of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.

\n"},"symbolSize":{"type":["Array","string"],"description":"

Symbol size of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.

\n"},"ignoreForceLayout":{"type":["boolean"],"description":"
\n

Since v4.5.0

\n
\n

Prevent this edge from force layout calculating.

\n","default":false}}}},"edges":{"type":["Array"],"description":"

Alias of links

\n"},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"'center'"},"top":{"type":["string","number"],"description":"

Distance between component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"'middle'"},"right":{"type":["string","number"],"description":"

Distance between component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"

Distance between component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n

Adaptive by default.

\n","default":"'auto'"},"width":{"type":["string","number"],"description":"

Width of component.

\n","default":"auto"},"height":{"type":["string","number"],"description":"

Height of component.

\n","default":"auto"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Sankey diagram \nSankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.

\n

Example:

\n\n\n\n\n


\nVisual Encoding:

\n

The Sankey diagram encodes each node of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The label next to the small rectangle encodes the name of the node.

\n

In addition, the edge between two small rectangles in the diagram encodes the link of the raw data. The width of edge is shown proportionally to the value of link.

\n","properties":{"type":{"type":["string"],"description":"","default":"'sankey'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between sankey component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"5%"},"top":{"type":["string","number"],"description":"

Distance between sankey component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"5%"},"right":{"type":["string","number"],"description":"

Distance between sankey component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"20%"},"bottom":{"type":["string","number"],"description":"

Distance between sankey component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"5%"},"width":{"type":["string","number"],"description":"

Width of sankey component.

\n","default":null},"height":{"type":["string","number"],"description":"

Height of sankey component.

\n","default":null},"nodeWidth":{"type":["number"],"description":"\n\n

The node width of rectangle in Sankey diagram.

\n","uiControl":{"type":"number","default":"20","min":"0","step":"0.5"},"default":20},"nodeGap":{"type":["number"],"description":"\n\n

The gap between any two rectangles in each column of the Sankey diagram.

\n","uiControl":{"type":"number","default":"8","min":"0","step":"0.5"},"default":8},"nodeAlign":{"type":["string"],"description":"\n\n

Controls the horizontal alignment of nodes in the diagram.

\n

May be:

\n
    \n

  • left: initial nodes (those with no incoming links) are aligned to the left of the diagram.

    \n
    • \n

  • right: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.

    \n
    • \n

  • justify: initial and terminal nodes are aligned on the left and right edges.

    \n
    • \n
\n

Note when orient is vertical, nodeAlign controls vertical alignment.

\n","uiControl":{"type":"enum","options":"justify,left,right"},"default":"'justify'"},"layoutIterations":{"type":["number"],"description":"\n\n

The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is 32. If you want the order of the nodes in the chart to be the same with the order in the original data, you can set the value to be 0.

\n","uiControl":{"type":"number","default":"32","min":"0","max":"100","step":"1"},"default":32},"orient":{"type":["string"],"description":"\n\n

The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values ​​are horizontal or vertical.

\n","uiControl":{"type":"enum","options":"horizontal,vertical"},"default":"'horizontal'"},"draggable":{"type":["boolean"],"description":"\n\n

The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to false.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"levels":{"type":["Array"],"description":"

The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:

\n
levels: [{\n    depth: 0,\n    itemStyle: {\n        color: '#fbb4ae'\n    },\n    lineStyle: {\n        color: 'source',\n        opacity: 0.6\n    }\n}, {\n    depth: 1,\n    itemStyle: {\n        color: '#b3cde3'\n    },\n    lineStyle: {\n        color: 'source',\n        opacity: 0.6\n    }\n}]\n
\n

You can also only set a certain layer:

\n
levels: [{\n    depth: 3,\n    itemStyle: {\n        color: '#fbb4ae'\n    },\n    lineStyle: {\n        color: 'source',\n        opacity: 0.6\n    }\n}]\n
\n","items":{"type":"Object","properties":{"depth":{"type":["number"],"description":"\n\n

Specify which layer is set, value starts from 0.

\n","uiControl":{"type":"number","default":"0","min":"0","step":"1"}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#212121'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}}}}},"label":{"type":["Object"],"description":"

label describes the text label style in each rectangular node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'right'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

The style of node rectangle in Sankey diagram.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}},"borderRadius":{"type":["number","Array"],"description":"
\n

Since v5.5.1

\n
\n\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0}}},"lineStyle":{"type":["Object"],"description":"

The edge style of Sankey diagram

\n","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n
    \n
  • 'adjacency' Focus on the elements of adjacent nodes and edges in the graph.
    • \n
\n
    \n
  • 'trajectory' Focus on all the elements connected to the node or edge in the graph. (Since v5.4.3)
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of selected state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#212121'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"data":{"type":["Array"],"description":"

The nodes list of the sankey diagram.

\n
data: [{\n    name: 'node1',\n    // This attribute decides the layer of the current node.\n    depth: 0\n}, {\n    name: 'node2',\n    depth: 1\n}]\n
\n

Notice: The name of the node cannot be repeated.

\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of the node.

\n"},"value":{"type":["number"],"description":"

The value of the node, which can used to determine the height of the node in horizontal orient or width in the vertical orient.

\n"},"depth":{"type":["number"],"description":"

The layer of the node, value starts from 0.

\n"},"itemStyle":{"type":["Object"],"description":"

The style of this node.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}},"borderRadius":{"type":["number","Array"],"description":"
\n

Since v5.5.1

\n
\n\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0}}},"label":{"type":["Object"],"description":"

The lable style of this node.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'none'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#212121'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"nodes":{"type":["Array"],"description":"

Equals to data

\n"},"links":{"type":["Array"],"description":"

The links between nodes. Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links. For instance:

\n
links: [{\n    source: 'n1',\n    target: 'n2'\n}, {\n    source: 'n2',\n    target: 'n3'\n}]\n
\n","items":{"type":"Object","properties":{"source":{"type":["string"],"description":"

The name of source node of edge

\n"},"target":{"type":["string"],"description":"

The name of target node of edge

\n"},"value":{"type":["number"],"description":"

The value of edge, which decides the width of edge.

\n"},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

The line style of edge.

\n","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

The line style of edge.

\n","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

The line style of edge.

\n","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"edgeLabel":{"type":["Object"],"description":"
\n

Since v5.4.1

\n
\n

The label style of each edge/link.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

The line style of edge.

\n","properties":{"color":{"type":["Color"],"description":"

The color of the edge in Sankey diagram.

\n
    \n
  • 'source': use source node color.
    • \n
  • 'target': use target node color.
    • \n
  • 'gradient': gradient color between source node and target node. (Since v5.0.0)
    • \n
\n","default":"'#314656'"},"opacity":{"type":["number"],"description":"

The opacity of the edge in Sankey diagram.

\n","default":0.2},"curveness":{"type":["number"],"description":"\n\n

The curveness of the edge in Sankey diagram.

\n","uiControl":{"type":"number","min":"0","max":"1","default":"0.5","step":"0.1"},"default":0.5},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0}}}}}}}},"edges":{"type":["Array"],"description":"

Equals to links

\n"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Funnel chart

\n

sample:

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'funnel'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'data'"},"min":{"type":["number"],"description":"\n\n

The specified minimum value.

\n","uiControl":{"type":"number","default":"0","step":"1"},"default":0},"max":{"type":["number"],"description":"\n\n

The specified maximum value.

\n","uiControl":{"type":"number","default":"100","step":"1"},"default":100},"minSize":{"type":["number","string"],"description":"\n\n

The mapped width from minimum data value min.

\n

It can be absolute pixel and also the percentage of layout width. If you don't want the graph of minimum value to be a triangle, you can set up this property larger than 0.

\n","uiControl":{"type":"percent","default":"0%"},"default":"'0%'"},"maxSize":{"type":["number","string"],"description":"\n\n

The mapped width from maximum data value max.

\n

It can be absolute pixel and also the percentage of layout width.

\n","uiControl":{"type":"percent","default":"100%"},"default":"'100%'"},"orient":{"type":["string"],"description":"\n\n

Orient of funnel，Can be 'vertical' or 'horizontal'.

\n
\n

Since v4.9.0

\n
\n","uiControl":{"type":"enum","options":"vertical,horizontal"},"default":"'vertical'"},"sort":{"type":["string","Function"],"description":"\n\n

Data sorting, which can be whether 'ascending', 'descending', 'none'(in data order) or a function, which is the same as Array.prototype.sort(function (a, b) { ... });

\n","uiControl":{"type":"enum","options":"none,descending,ascending","default":"descending"},"default":"'descending'"},"gap":{"type":["number"],"description":"\n\n

Gap between each trapezoid.

\n","uiControl":{"type":"number","default":"0","min":"0","step":"0.5"},"default":0},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"funnelAlign":{"type":["string"],"description":"\n\n

Horizontal align. Defaults to align center. Can be 'left', 'right', 'center'.

\n","uiControl":{"type":"enum","options":"left,center,right","default":"center"},"default":"'center'"},"label":{"type":["Object"],"description":"

Text label of funnel chart, to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"

Label position.

\n

Options:

\n
    \n
  • 'left'Left side of funnel chart. Available when orient is 'vertical'.
    • \n
  • 'right' Right side of funnel chart. Available when orient is 'horizontal'.
    • \n
  • 'top' Top side of funnel chart. Available when orient is 'vertical'.
    • \n
  • 'bottom' Bottom side of funnel chart. Available when orient is 'vertical'.
    • \n
  • 'inside'Inside the trapezoid of funnel chart.
    • \n
  • 'insideRight'Right inside the trapezoid of funnel chart.
    • \n
  • 'insideLeft'Left inside the trapezoid of funnel chart.
    • \n
  • 'leftTop'Top-left of funnel chart.
    • \n
  • 'leftBottom'Bottom-left of funnel chart.
    • \n
  • 'rightTop'Top-right side of funnel chart.
    • \n
  • 'rightBottom'Bottom-right side of funnel chart.
    • \n
  • 'inner' equals to 'inside'.
    • \n
  • 'center' equals to 'inside'.
    • \n
\n

labelLine can be used to guide to the corresponding trapezoid when label is not inside.

\n","default":"'outside'"},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"

The visual guide line style of label. When label position is set as 'left'or'right', the visual guide line will show.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"length":{"type":["number"],"description":"

The length of the first part from visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color","Function"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n

Supports callback functions, in the form of:

\n
(params: Object) => Color\n
\n

Input parameters are seriesIndex, dataIndex, data, value, and etc. of data item.

\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between Funnel component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":80},"top":{"type":["string","number"],"description":"

Distance between Funnel component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":60},"right":{"type":["string","number"],"description":"

Distance between Funnel component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":80},"bottom":{"type":["string","number"],"description":"

Distance between Funnel component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":60},"width":{"type":["string","number"],"description":"

Width of Funnel component. Adaptive by default.

\n","default":"'auto'"},"height":{"type":["string","number"],"description":"

Height of Funnel component. Adaptive by default.

\n","default":"'auto'"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be a single data value, like:

\n
[12, 34, 56, 10, 23]\n
\n

Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:

\n
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n
\n

In this case, we can assign the second value in each array item to visualMap component.

\n

More likely, we need to assign name to each data item, in which case each item should be an object:

\n
[{\n    // name of date item\n    name: 'data1',\n    // value of date item is 8\n    value: 10\n}, {\n    name: 'data2',\n    value: 20\n}]\n
\n

Each data item can be further customized:

\n
[{\n    name: 'data1',\n    value: 10\n}, {\n    // name of data item\n    name: 'data2',\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

the name of data item.

\n"},"value":{"type":["number"],"description":"

data value.

\n"},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"height":{"type":["string","number"],"description":"

Height of this data item. By default, the height is evenly divided for all data items. The height can be set to percentage (e.g.: '10%') or pixel value (e.g.: 20). Please make sure that the total height of all data items is 100%.

\n"},"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"label":{"type":["Object"],"description":"

The label configuration of a single data item.

\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"

Label position.

\n

Options:

\n
    \n
  • 'left'Left side of funnel chart. Available when orient is 'vertical'.
    • \n
  • 'right' Right side of funnel chart. Available when orient is 'horizontal'.
    • \n
  • 'top' Top side of funnel chart. Available when orient is 'vertical'.
    • \n
  • 'bottom' Bottom side of funnel chart. Available when orient is 'vertical'.
    • \n
  • 'inside'Inside the trapezoid of funnel chart.
    • \n
  • 'insideRight'Right inside the trapezoid of funnel chart.
    • \n
  • 'insideLeft'Left inside the trapezoid of funnel chart.
    • \n
  • 'leftTop'Top-left of funnel chart.
    • \n
  • 'leftBottom'Bottom-left of funnel chart.
    • \n
  • 'rightTop'Top-right side of funnel chart.
    • \n
  • 'rightBottom'Bottom-right side of funnel chart.
    • \n
  • 'inner' equals to 'inside'.
    • \n
  • 'center' equals to 'inside'.
    • \n
\n

labelLine can be used to guide to the corresponding trapezoid when label is not inside.

\n","default":"'outside'"},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"length":{"type":["number"],"description":"

The length of the first part from visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // percentage\n    percent: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether to show visual guide line.

\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n
data: [\n\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Gauge chart

\n

Example:

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'gauge'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'data'"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"center":{"type":["Array"],"description":"\n\n

Center position of , the first of which is the horizontal position, and the second is the vertical position.

\n

Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.

\n

Example:

\n
// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n
","uiControl":{"type":"percentvector","dims":"x,y"},"default":"['50%', '50%']"},"radius":{"type":["number","string"],"description":"\n\n

The radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value.

\n","uiControl":{"type":"percent","default":"75%"},"default":"'75%'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"startAngle":{"type":["number"],"description":"\n\n

The start angle of gauge chart. The direct right side of circle center is 0 degree, the right above it is 90 degree, the direct left side of it is 180 degree.

\n","uiControl":{"type":"angle","min":"-360","max":"360","default":"225","step":"1"},"default":225},"endAngle":{"type":["number"],"description":"\n\n

The end angle of gauge chart.

\n","uiControl":{"type":"angle","min":"-360","max":"360","default":"-45","step":"1"},"default":-45},"clockwise":{"type":["boolean"],"description":"\n\n

Whether the scale in gauge chart increases clockwise.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"data":{"type":["Array"],"description":"

Data array of series, which can be a single data value, like:

\n
[12, 34, 56, 10, 23]\n
\n

Or, if need extra dimensions for components like visualMap to map to graphic attributes like color, it can also be in the form of array. For example:

\n
[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n
\n

In this case, we can assign the second value in each array item to visualMap component.

\n

More likely, we need to assign name to each data item, in which case each item should be an object:

\n
[{\n    // name of date item\n    name: 'data1',\n    // value of date item is 8\n    value: 10\n}, {\n    name: 'data2',\n    value: 20\n}]\n
\n

Each data item can be further customized:

\n
[{\n    name: 'data1',\n    value: 10\n}, {\n    // name of data item\n    name: 'data2',\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n
\n","items":{"type":"Object","properties":{"title":{"type":["Object"],"description":"

The title of gauge chart.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the title.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"offsetCenter":{"type":["Array"],"description":"\n\n

The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.

\n","uiControl":{"type":"percentvector","default":"0,20%","dims":"x,y"},"default":"[0, '20%']"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#464646'"},"default":"'#464646'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"16","min":"1","step":"1"},"default":16},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"valueAnimation":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to enable text animation of value change.

\n","default":true}}},"detail":{"type":["Object"],"description":"

The detail about gauge chart which is used to show data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the details.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"color":{"type":["Color"],"description":"\n\n

The text color. Defaults to use the color of section where the numerical value belongs to.

\n","uiControl":{"type":"color"},"default":"'#464646'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'bold'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"30","min":"1","step":"1"},"default":30},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"},"default":30},"backgroundColor":{"type":["Color"],"description":"\n\n

The background color of detail.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of detail.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of detail.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

The width of detail.

\n","uiControl":{"type":"percent","default":"100","min":"0","step":"1"},"default":100},"height":{"type":["number"],"description":"\n\n

The height of detail.

\n","uiControl":{"type":"percent","default":"40","min":"0","step":"1"},"default":40},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"valueAnimation":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to enable text animation of value change.

\n","default":true},"offsetCenter":{"type":["Array"],"description":"\n\n

The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.

\n","uiControl":{"type":"percentvector","default":"0,-40%","dims":"x,y"},"default":"[0, '40%']"},"formatter":{"type":["Function","string"],"description":"

Formatter is used to format detail, which supports string template and callback function.

\n
formatter: function (value) {\n    return value.toFixed(0);\n}\n
\n"}}},"name":{"type":["string"],"description":"

Data name.

\n"},"value":{"type":["number"],"description":"\n\n

Data value.

\n","uiControl":{"type":"number","default":"0","step":"1"}},"itemStyle":{"type":["Object"],"description":"

The style of data pointer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}}}}},"min":{"type":["number"],"description":"\n\n

The minimum data value which map to minAngle.

\n","uiControl":{"type":"number","default":"0","step":"1"},"default":0},"max":{"type":["number"],"description":"\n\n

The maximum data value which map to maxAngle.

\n","uiControl":{"type":"number","default":"100","step":"1"},"default":100},"splitNumber":{"type":["number"],"description":"\n\n

The number of split segments of gauge chart scale.

\n","uiControl":{"type":"number","min":"1","default":"10","step":"1"},"default":10},"axisLine":{"type":["Object"],"description":"

The related configuration about the axis line of gauge chart.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the axis line of gauge chart.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"roundCap":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to add round caps at the end.

\n","default":false},"lineStyle":{"type":["Object"],"description":"

The style of the axis line of gauge chart.

\n","properties":{"color":{"type":["Array"],"description":"

The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.

\n

Default value:

\n
[[1, '#E6EBF8']]\n
\n

Note: The value of color[i][0] means the percentage of the axis line of the gauge chart's segments, which should be between 0 and 1, and color[i][1] is the corresponding color.

\n
color: [\n    [0.1, 'red'], // 0~10% is red\n    [0.2, 'green'], // 10~20% is green\n    [0.3, 'blue'], // 20~30% is blue\n    // ...\n]\n
\n"},"width":{"type":["number"],"description":"

The width of axis line.

\n","default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"progress":{"type":["Object"],"description":"
\n

Since v5.0

\n
\n

Used to show current progress.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the progress of gauge chart.

\n","uiControl":{"type":"boolean","default":"true"},"default":false},"overlap":{"type":["boolean"],"description":"\n\n

Whether the progress overlaps when there are multiple groups of data.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"width":{"type":["number"],"description":"\n\n

The width of progress.

\n","uiControl":{"type":"boolean","default":"true"},"default":10},"roundCap":{"type":["boolean"],"description":"

Whether to add round caps at the end

\n","default":false},"clip":{"type":["boolean"],"description":"

Whether to clip overflow.

\n","default":false},"itemStyle":{"type":["Object"],"description":"

The style of progress.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"splitLine":{"type":["Object"],"description":"

The style of split line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the split line.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"length":{"type":["number","string"],"description":"\n\n

The length of split line, can be a percentage value relative to radius.

\n","uiControl":{"type":"percent","default":"10","min":"0","step":"0.5"},"default":10},"distance":{"type":["number"],"description":"
\n

Since v5.0

\n
\n\n\n

The distance between the split line and axis line.

\n","uiControl":{"type":"number","default":"10","step":"0.5"},"default":10},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#63677A"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"3","min":"0","step":"0.5"},"default":3},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisTick":{"type":["Object"],"description":"

The tick line style.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the scale.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"splitNumber":{"type":["number"],"description":"\n\n

The split scale number between split line.

\n","uiControl":{"type":"number","min":"1","default":"5","step":"1"},"default":5},"length":{"type":["number","string"],"description":"\n\n

The length of tick line, can be a percentage value relative to radius.

\n","uiControl":{"type":"percent","default":"6","min":"0","step":"0.5"},"default":6},"distance":{"type":["number"],"description":"
\n

Since v5.0

\n
\n\n\n

The distance between the tick line and axis line.

\n","uiControl":{"type":"number","default":"10","step":"0.5"},"default":10},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"#63677A"},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":1},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"axisLabel":{"type":["Object"],"description":"

Axis tick label.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"distance":{"type":["number"],"description":"\n\n

The distance between the label and tick line.

\n","uiControl":{"type":"number","default":"15","step":"0.5"},"default":15},"rotate":{"type":["string","number"],"description":"
\n

Since v5.4.0

\n
\n

If it is number type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.

\n

Besides, it can be string 'radial', standing for radial rotation; or 'tangential', standing for tangential rotation.

\n

If no rotation is wanted, it can be set to 0.

\n"},"formatter":{"type":["string","Function"],"description":"

The content formatter of scale label, which supports both string template and callback function.\nExample:

\n
// use string template. the template variable {value} represent the default label text\nformatter: '{value} kg'\n\n// use function callback. the function parameters are scale values.\nformatter: function (value) {\n    return value + 'km/h';\n}\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#464646'"},"default":"'#464646'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"pointer":{"type":["Object"],"description":"

Gauge chart pointer.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the pointer.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.2.0

\n
\n\n\n

Whether to show the pointer above detail and title.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"icon":{"type":["string"],"description":"
\n

Since v5.0

\n
\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":null},"offsetCenter":{"type":["Array"],"description":"
\n

Since v5.0

\n
\n\n\n

The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.

\n","uiControl":{"type":"percentvector","default":"0,0","dims":"x,y"},"default":"[0, 0]"},"length":{"type":["string","number"],"description":"\n\n

The length of pointer which could be absolute value and also the percentage relative to radius.

\n","uiControl":{"type":"percent","default":"60%","min":"0","step":"0.5"},"default":"'60%'"},"width":{"type":["number"],"description":"\n\n

The width of pointer.

\n","uiControl":{"type":"number","default":"6","min":"0","step":"0.5"},"default":6},"keepAspect":{"type":["boolean"],"description":"
\n

Since v5.0

\n
\n\n\n

Whether to keep aspect for icons in the form of path://.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of pointer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"anchor":{"type":["Object"],"description":"
\n

Since v5.0

\n
\n

The fixed point of a pointer in a dial.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the anchor.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"showAbove":{"type":["boolean"],"description":"\n\n

Whether the anchor is showed above the pointer.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"size":{"type":["number"],"description":"\n\n

The size of anchor.

\n","uiControl":{"type":"number","default":"6","min":"0","step":"0.5"},"default":6},"icon":{"type":["string"],"description":"

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'default'"},"offsetCenter":{"type":["Array"],"description":"\n\n

The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.

\n","uiControl":{"type":"percentvector","default":"0,0","dims":"x,y"},"default":"[0, 0]"},"keepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for icons in the form of path://.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"

The style of anchor.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'#fff'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of anchor.

\n","uiControl":{"type":"color","default":"#5470c6"},"default":"'#5470c6'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

The style of gauge chart.

\n","properties":{"color":{"type":["Color"],"description":"

The color of pointer. Defaults to use the color of section where the numerical value belongs to.

\n","default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"title":{"type":["Object"],"description":"

The title of gauge chart.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the title.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"offsetCenter":{"type":["Array"],"description":"\n\n

The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.

\n","uiControl":{"type":"percentvector","default":"0,20%","dims":"x,y"},"default":"[0, '20%']"},"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#464646'"},"default":"'#464646'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"16","min":"1","step":"1"},"default":16},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"valueAnimation":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to enable text animation of value change.

\n","default":true}}},"detail":{"type":["Object"],"description":"

The detail about gauge chart which is used to show data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the details.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"color":{"type":["Color"],"description":"\n\n

The text color. Defaults to use the color of section where the numerical value belongs to.

\n","uiControl":{"type":"color"},"default":"'#464646'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'bold'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"30","min":"1","step":"1"},"default":30},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"},"default":30},"backgroundColor":{"type":["Color"],"description":"\n\n

The background color of detail.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of detail.

\n","uiControl":{"type":"color","default":"#ccc"},"default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of detail.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

The width of detail.

\n","uiControl":{"type":"percent","default":"100","min":"0","step":"1"},"default":100},"height":{"type":["number"],"description":"\n\n

The height of detail.

\n","uiControl":{"type":"percent","default":"40","min":"0","step":"1"},"default":40},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"valueAnimation":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to enable text animation of value change.

\n","default":true},"offsetCenter":{"type":["Array"],"description":"\n\n

The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.

\n","uiControl":{"type":"percentvector","default":"0,-40%","dims":"x,y"},"default":"[0, '40%']"},"formatter":{"type":["Function","string"],"description":"

Formatter is used to format detail, which supports string template and callback function.

\n
formatter: function (value) {\n    return value.toFixed(0);\n}\n
\n"}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n

When multiple attributes exist, priority is as the above order.

\n
data: [\n\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

pictorial bar chart

\n

Pictorial bar chart is a type of bar chart that customized glyph (like images, SVG PathData) can be used instead of rectangular bar. This kind of chart is usually used in infographic.

\n

Pictorial bar chart can only be used in rectangular coordinate with at least 1 category axis.

\n

Example:

\n\n\n\n\n

Layout

\n

Basically pictorialBar is a type of bar chart, which follows the bar chart layout. In pictorialBar, each bar is named as reference bar, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its reference bar according to the setting of symbolPosition、symbolOffset.

\n

See the example below:

\n\n\n\n

symbolSize is used to specify the size of graphic elements.

\n

See the example below:

\n\n\n\n\n\n

Graphic types

\n

symbolRepeat can be

\n

Graphic elements can be set as 'repeat' or not by symbolRepeat.

\n
    \n
  • If set as false (default), a single graphic element is used to represent a data item.
    • \n
  • If set as true, a group of repeat graphic elements are used to represent a data item.
    • \n
\n

See the example below:

\n\n\n\n

Each graphic element can be basic shape (like 'circle', 'rect', ...), or SVG PathData, or image. See symbolType.

\n

See the example below:

\n\n\n\n

symbolClip can be used to clip graphic elements.

\n

See the example below:

\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pictorialBar'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"cursor":{"type":["string"],"description":"\n\n\n\n

The mouse style when mouse hovers on an element, the same as cursor property in CSS.

\n","uiControl":{"type":"enum","options":"auto,pointer,move","default":"pointer"},"default":"'pointer'"},"label":{"type":["Object"],"description":"

Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, labelis taken to be at the same level with itemStyle, and has emphasis as itemStyle does.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.0.0

\n
\n

Whether to enable hover animation.

\n","uiControl":{"type":"boolean"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Available when emphasis.focus is set.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state. Available when selectedMode is set.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"barWidth":{"type":["number","string"],"description":"

The width of the bar. Adaptive when not specified.

\n\n\n\n\n

Can be an absolute value like 40 or a percent value like '60%'. The percent is based on the calculated category width.

\n

In a single coordinate system, this attribute is shared by multiple 'pictorialBar' series. This attribute should be set on the last 'pictorialBar' series in the coordinate system, then it will be adopted by all 'pictorialBar' series in the coordinate system.

\n","uiControl":{"type":"percent"},"default":null},"barMaxWidth":{"type":["number","string"],"description":"

The maximum width of the bar.

\n

Has higher priority than barWidth.

\n

Can be an absolute value like 40 or a percent value like '60%'. The percent is based on the calculated category width.

\n

In a single coordinate system, this attribute is shared by multiple 'pictorialBar' series. This attribute should be set on the last 'pictorialBar' series in the coordinate system, then it will be adopted by all 'pictorialBar' series in the coordinate system.

\n","default":null},"barMinWidth":{"type":["number","string"],"description":"

The minimum width of the bar. In cartesian the default value is 1, otherwise the default value if null.

\n

Has higher priority than barWidth.

\n

Can be an absolute value like 40 or a percent value like '60%'. The percent is based on the calculated category width.

\n

In a single coordinate system, this attribute is shared by multiple 'pictorialBar' series. This attribute should be set on the last 'pictorialBar' series in the coordinate system, then it will be adopted by all 'pictorialBar' series in the coordinate system.

\n"},"barMinHeight":{"type":["number"],"description":"

The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.

\n","default":0},"barMinAngle":{"type":["number"],"description":"

The minimum angle of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small. Valid only for bar series on polar coordinates.

\n\n","uiControl":{"type":"number","min":"0"},"default":0},"barGap":{"type":["string"],"description":"\n\n

The gap between bars between different series, is a percent value like '20%', which means 20% of the bar width.

\n

Set barGap as '-100%' can overlap bars that belong to different series, which is useful when making a series of bar be background.

\n

In a single coordinate system, this attribute is shared by multiple 'pictorialBar' series. This attribute should be set on the last 'pictorialBar' series in the coordinate system, then it will be adopted by all 'pictorialBar' series in the coordinate system.

\n

For example:

\n\n\n","uiControl":{"type":"percent","default":"-100%"},"default":"-100%"},"barCategoryGap":{"type":["number","string"],"description":"

The bar gap of a single series, by default, a suitable spacing is calculated based on the number of series in the bar chart. When there are more series, the spacing will be appropriately reduced, can be set as a fixed value.

\n

In a single coordinate system, this attribute is shared by multiple 'pictorialBar' series. This attribute should be set on the last 'pictorialBar' series in the coordinate system, then it will be adopted by all 'pictorialBar' series in the coordinate system.

\n"},"symbol":{"type":["string"],"description":"

Specify the type of graphic elements.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

Example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n
\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

Symbol size.

\n

It can be set as a array, which means [width, height]. For example, [20, 10] means width 20 and height 10. It can also be set as a single number, like 10, which is equivalent to [10, 10].

\n

Absolute value can be used (like 10), or percent value can be used (like '120%', ['55%', 23]).

\n

When percent value is used, final size of the graphic element is calculated based on its reference bar.

\n

For example, there is a reference bar based on x axis (that is, it is a vertical bar), and symbolSize is set as ['30%', '50%'], the final size of its graphic elements is:

\n
    \n
  • width: <width of reference bar> * 30%.
    • \n
  • height:
      \n
    • If symbolRepeat is used: <height of reference bar> * 50%.
      • \n
    • If symbolRepeat is not used: <height of reference bar> * 50%.
      • \n
    \n
    • \n
\n

Analogously, the case that based on y axis can be obtained by exchanging them.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"percent","default":"100%,100%","dims":"W,H"},"default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"\n\n

Specify the location of the graphic elements. Optional values:

\n
    \n
  • 'start': The edge of graphic element inscribes with the start of the reference bar.
    • \n
  • 'end': The edge of graphic element inscribes with the end of the reference bar.
    • \n
  • 'center': The graphic element is at the center of the reference bar.
    • \n
\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"enum","options":"start,end,center","default":"start"},"default":"'start'"},"symbolOffset":{"type":["Array"],"description":"\n\n

Specify the offset of graphic element according to its original position. Adopting symbolOffset is the final step in layout, which enables adjustment of graphic element position.

\n

A absolute value can be set (like 10), or a percent value can be set (like '120%'、['55%', 23]), which is based on its symbolSize.

\n

For example, [0, '-50%'] means the graphic element will be adjusted upward half of the size of itself.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"percentvector","default":"0,0","dims":"x,y"},"default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"\n\n

The degree of the rotation of a graphic element.

\n

Notice, symbolRotate will not affect the position of the graphic element, but just rotating by its center.

\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"}},"symbolRepeat":{"type":["boolean","number","string"],"description":"\n\n

Whether to repeat a graphic element. Optional values:

\n
    \n
  • false/null/undefined: Do not repeat, that is, each graphic element represents a data item.
    • \n
  • true: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to data.
    • \n
  • a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.
    • \n
  • 'fixed': Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to symbolBoundingData, that is, the repeat times has nothing to do with data. The setting is useful when graphic elements are used as background.
    • \n
\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"enum","options":"true,false,fixed"}},"symbolRepeatDirection":{"type":["string"],"description":"\n\n

When symbolRepeat is used, symbolRepeatDirection specifies the render order of the repeated graphic elements. The setting is useful in these cases below:

\n
    \n

  • If symbolMargin is set as a negative value, repeated elements will overlap with each other. symbolRepeatDirection can be used to specify the order of overlap.

    \n
    • \n

  • If animationDelay or animationDelayUpdate is used, symbolRepeatDirection specifies the order of index.

    \n
    • \n
\n

Optional values can be 'start' and 'end'.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"enum","options":"start,end","default":"start"},"default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"\n\n

Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when symbolRepeat is used.

\n

Absolute value can be used (like 20), or percent value can be used (like '-30%'), which is based on its symbolSize.

\n

symbolMargin can be positive value or negative value, which enables overlap of graphic elements when symbolRepeat is used.

\n

A "!" can be appended on the end of the value, like "30%!" or 25!, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.

\n

Notice:

\n
    \n
  • When symbolRepeat is true/'fixed':\n The given symbolMargin is just a reference value. The final gap of graphic elements will be calculated according to symbolRepeat, symbolMargin and symbolBoundingData.
    • \n
  • When symbolRepeat is set as a number:\n symbolMargin does not work any more.
    • \n
\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"percentvector","default":"0,0","dims":"x,y"}},"symbolClip":{"type":["boolean"],"description":"\n\n

Whether to clip graphic elements.

\n
    \n
  • false/null/undefined: The whole graphic elements represent the size of value.
    • \n
  • true: The clipped graphic elements reperent the size of value.
    • \n
\n

symbolClip is usually used in this case: both "amount value" and "current value" should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.

\n

For example:

\n\n\n\n

Notice, in the example above,

\n
    \n
  • The same symbolBoundingData is used in "background series" and "current value seires", which makes their graphic elements are the same size.
    • \n
  • A bigger z is set on "current value series", which makes it is over "background series".
    • \n
\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"boolean"},"default":false},"symbolBoundingData":{"type":["number"],"description":"

Defines a bounding area available for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if symbolBoundingData is set, the final size (or layout) of the graphic elements depend on the symbolBoundingData.

\n

When reference bar is horizontal, symbolBoundingData is corresponding to x axis, while reference bar is vertical, symbolBoundingData is corresponding to y axis.

\n

Rule:

\n
    \n

  • If symbolRepeat is not used:

    \n

    symbolBoundingData is the same as the size of reference bar by default. The size of the graphic element is determined by symbolBoundingData. For example, if reference bar is vertical, its data is 24, symbolSize is set as [30, '50%'], symbolBoundingData is set as 124, the final size of the graphic element will be 124 * 50% = 62. If symbolBoundingData is not set, the final size will be 24 * 50% = 12.

    \n
    • \n

  • If symbolRepeat is used:

    \n

    symbolBoundingData is the extreme value of the coordinate system. symbolBoundingData defines a bounding area, where repeated graphic elements layout according to symbolMargin and symbolRepeat and symbolSize. Both these settings determine the gap size of the repeated graphic elements.

    \n
    • \n
\n

symbolBoundingData is usually used in these cases:

\n
    \n

  • When symbolCilp is used:

    \n

    And a series is used to display "amont value", while another series is used to display "current value". symbolBoundingData can be used to ensure that the graphic elements of these two series are at the same size.

    \n
    • \n
\n

For example:

\n\n\n\n
    \n

  • When symbolRepeat is used:

    \n

    symbolBoundingData can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set symbolBoundingData, whose default value is a stable value (extreme value of the coordinate system).

    \n
    • \n
\n

For example:

\n\n\n\n


\nsymbolBoundingData can also be an array, such as [-40, 60], which specifies both negative and positive symbolBoundingData.

\n

Check this example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n
\n"},"symbolPatternSize":{"type":["number"],"description":"\n\n

Image can be used as the pattern of graphic elements.

\n
var textureImg = new Image();\ntextureImg.src = 'data:image/jpeg;base64,...'; // dataURI\n// Or\n// textureImg.src = 'http://example.website/xx.png'; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: 'repeat'\n    }\n}\n
\n

symbolPatternSize specifies the size of pattern image. For example, if symbolPatternSize is 400, the pattern image will be displayed at the size of 400px * 400px.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"number","default":"400","step":"10","min":"0"},"default":400},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'","properties":{"animationDelay":{"type":["number","Function"],"description":"

Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.

\n

For example:

\n
animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n
\n

For example:

\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"

Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.

\n

For example:

\n
animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n
\n

For example:

\n\n\n\n\n\n\n\n\n","default":0}}},"animationDelay":{"type":["number","Function"],"description":"

Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.

\n

For example:

\n
animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n
\n

For example:

\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"

Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.

\n

For example:

\n
animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n
\n

For example:

\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

The name of data item.

\n"},"value":{"type":["number"],"description":"

The value of a single data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"symbol":{"type":["string"],"description":"

Specify the type of graphic elements.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

Example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n
\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"\n\n

Symbol size.

\n

It can be set as a array, which means [width, height]. For example, [20, 10] means width 20 and height 10. It can also be set as a single number, like 10, which is equivalent to [10, 10].

\n

Absolute value can be used (like 10), or percent value can be used (like '120%', ['55%', 23]).

\n

When percent value is used, final size of the graphic element is calculated based on its reference bar.

\n

For example, there is a reference bar based on x axis (that is, it is a vertical bar), and symbolSize is set as ['30%', '50%'], the final size of its graphic elements is:

\n
    \n
  • width: <width of reference bar> * 30%.
    • \n
  • height:
      \n
    • If symbolRepeat is used: <height of reference bar> * 50%.
      • \n
    • If symbolRepeat is not used: <height of reference bar> * 50%.
      • \n
    \n
    • \n
\n

Analogously, the case that based on y axis can be obtained by exchanging them.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"percent","default":"100%,100%","dims":"W,H"},"default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"\n\n

Specify the location of the graphic elements. Optional values:

\n
    \n
  • 'start': The edge of graphic element inscribes with the start of the reference bar.
    • \n
  • 'end': The edge of graphic element inscribes with the end of the reference bar.
    • \n
  • 'center': The graphic element is at the center of the reference bar.
    • \n
\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"enum","options":"start,end,center","default":"start"},"default":"'start'"},"symbolOffset":{"type":["Array"],"description":"\n\n

Specify the offset of graphic element according to its original position. Adopting symbolOffset is the final step in layout, which enables adjustment of graphic element position.

\n

A absolute value can be set (like 10), or a percent value can be set (like '120%'、['55%', 23]), which is based on its symbolSize.

\n

For example, [0, '-50%'] means the graphic element will be adjusted upward half of the size of itself.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"percentvector","default":"0,0","dims":"x,y"},"default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"\n\n

The degree of the rotation of a graphic element.

\n

Notice, symbolRotate will not affect the position of the graphic element, but just rotating by its center.

\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"angle","min":"-360","max":"360","step":"1"}},"symbolRepeat":{"type":["boolean","number","string"],"description":"\n\n

Whether to repeat a graphic element. Optional values:

\n
    \n
  • false/null/undefined: Do not repeat, that is, each graphic element represents a data item.
    • \n
  • true: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to data.
    • \n
  • a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.
    • \n
  • 'fixed': Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to symbolBoundingData, that is, the repeat times has nothing to do with data. The setting is useful when graphic elements are used as background.
    • \n
\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"enum","options":"true,false,fixed"}},"symbolRepeatDirection":{"type":["string"],"description":"\n\n

When symbolRepeat is used, symbolRepeatDirection specifies the render order of the repeated graphic elements. The setting is useful in these cases below:

\n
    \n

  • If symbolMargin is set as a negative value, repeated elements will overlap with each other. symbolRepeatDirection can be used to specify the order of overlap.

    \n
    • \n

  • If animationDelay or animationDelayUpdate is used, symbolRepeatDirection specifies the order of index.

    \n
    • \n
\n

Optional values can be 'start' and 'end'.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"enum","options":"start,end","default":"start"},"default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"\n\n

Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when symbolRepeat is used.

\n

Absolute value can be used (like 20), or percent value can be used (like '-30%'), which is based on its symbolSize.

\n

symbolMargin can be positive value or negative value, which enables overlap of graphic elements when symbolRepeat is used.

\n

A "!" can be appended on the end of the value, like "30%!" or 25!, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.

\n

Notice:

\n
    \n
  • When symbolRepeat is true/'fixed':\n The given symbolMargin is just a reference value. The final gap of graphic elements will be calculated according to symbolRepeat, symbolMargin and symbolBoundingData.
    • \n
  • When symbolRepeat is set as a number:\n symbolMargin does not work any more.
    • \n
\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"percentvector","default":"0,0","dims":"x,y"}},"symbolClip":{"type":["boolean"],"description":"\n\n

Whether to clip graphic elements.

\n
    \n
  • false/null/undefined: The whole graphic elements represent the size of value.
    • \n
  • true: The clipped graphic elements reperent the size of value.
    • \n
\n

symbolClip is usually used in this case: both "amount value" and "current value" should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.

\n

For example:

\n\n\n\n

Notice, in the example above,

\n
    \n
  • The same symbolBoundingData is used in "background series" and "current value seires", which makes their graphic elements are the same size.
    • \n
  • A bigger z is set on "current value series", which makes it is over "background series".
    • \n
\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"boolean"},"default":false},"symbolBoundingData":{"type":["number"],"description":"

Defines a bounding area available for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if symbolBoundingData is set, the final size (or layout) of the graphic elements depend on the symbolBoundingData.

\n

When reference bar is horizontal, symbolBoundingData is corresponding to x axis, while reference bar is vertical, symbolBoundingData is corresponding to y axis.

\n

Rule:

\n
    \n

  • If symbolRepeat is not used:

    \n

    symbolBoundingData is the same as the size of reference bar by default. The size of the graphic element is determined by symbolBoundingData. For example, if reference bar is vertical, its data is 24, symbolSize is set as [30, '50%'], symbolBoundingData is set as 124, the final size of the graphic element will be 124 * 50% = 62. If symbolBoundingData is not set, the final size will be 24 * 50% = 12.

    \n
    • \n

  • If symbolRepeat is used:

    \n

    symbolBoundingData is the extreme value of the coordinate system. symbolBoundingData defines a bounding area, where repeated graphic elements layout according to symbolMargin and symbolRepeat and symbolSize. Both these settings determine the gap size of the repeated graphic elements.

    \n
    • \n
\n

symbolBoundingData is usually used in these cases:

\n
    \n

  • When symbolCilp is used:

    \n

    And a series is used to display "amont value", while another series is used to display "current value". symbolBoundingData can be used to ensure that the graphic elements of these two series are at the same size.

    \n
    • \n
\n

For example:

\n\n\n\n
    \n

  • When symbolRepeat is used:

    \n

    symbolBoundingData can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set symbolBoundingData, whose default value is a stable value (extreme value of the coordinate system).

    \n
    • \n
\n

For example:

\n\n\n\n


\nsymbolBoundingData can also be an array, such as [-40, 60], which specifies both negative and positive symbolBoundingData.

\n

Check this example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n
\n"},"symbolPatternSize":{"type":["number"],"description":"\n\n

Image can be used as the pattern of graphic elements.

\n
var textureImg = new Image();\ntextureImg.src = 'data:image/jpeg;base64,...'; // dataURI\n// Or\n// textureImg.src = 'http://example.website/xx.png'; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: 'repeat'\n    }\n}\n
\n

symbolPatternSize specifies the size of pattern image. For example, if symbolPatternSize is 400, the pattern image will be displayed at the size of 400px * 400px.

\n

For example:

\n\n\n\n\n\n

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

\n

For example:

\n
series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n
\n","uiControl":{"type":"number","default":"400","step":"10","min":"0"},"default":400},"z":{"type":["number"],"description":"

Specify the relationship of overlap between graphic elements. A bigger value means higher.

\n"},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.

\n

For example:

\n
animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n
\n

For example:

\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"

Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.

\n

For example:

\n
animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n
\n

For example:

\n\n\n\n\n\n\n\n\n\n\n","default":0},"label":{"type":["Object"],"description":"

The style setting of the text label in a single bar.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"inside"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Emphasis state of the specified single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"scale":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to enable hover animation.

\n","default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color. Can set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state of the specified single data.

\n","properties":{"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state of the specified single data.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"

Label style configurations of single data.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}},"position":{"type":["string","Array"],"description":"\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n
    \n
  • Additional positions are supported for bar series under polar coordinates: start / insideStart / middle / insideEnd / end.
    • \n
\n
\n

Since v5.2.0

\n
\n\n\n\n\n\n\n\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"

Rectangle style configurations of single data.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Bar color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"'auto'"},"borderColor":{"type":["Color"],"description":"\n\n

The border color of bar.

\n","uiControl":{"type":"color","value":"#000"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

The border width of bar. defaults to have no border.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string"],"description":"\n\n

Border type. Can be 'dashed', 'dotted'.

\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderRadius":{"type":["number","Array"],"description":"\n\n

The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.

\n

For example:

\n
borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n
","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"},"default":0},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"markPoint":{"type":["Object"],"description":"

Mark point in a chart.

\n","properties":{"symbol":{"type":["string","Function"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n

If symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => string\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"icon","default":"circle"},"default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n

If size of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number|Array\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n","uiControl":{"type":"number","min":"0"},"default":50},"symbolRotate":{"type":["number","Function"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n

If rotation of symbols needs to be different, you can set with callback function in the following format:

\n
(value: Array|number, params: Object) => number\n
\n

The first parameter value is the value in data, and the second parameter params is the rest parameters of data item.

\n
\n

Callback is supported since 4.8.0 .

\n
\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label of mark point.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark point.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["Array"],"description":"

Data array for mark points, each of which is an object. Here are some ways to assign mark point position.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n
\n

When multiple attributes exist, priority is as the above order.

\n

For example:

\n
data: [\n    {\n        name: 'maximum',\n        type: 'max'\n    }, \n    {\n        name: 'coordinate',\n        coord: [10, 20]\n    }, {\n        name: 'fixed x position',\n        yAxis: 10,\n        x: '90%'\n    }, \n\n    {\n        name: 'screen coordinate',\n        x: 100,\n        y: 100\n    }\n]\n
\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Mark point name. Can be used as a template variable data name {b} in label formatter.

\n"},"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' maximum value.
    • \n
  • 'max' minimum value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Available when using type it is used to assign maximum value and minimum value in dimensions, it could be 0 (xAxis, radiusAxis), 1 (yAxis, angleAxis), and use the first value axis dimension by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of .

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"

Mark point style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'inside'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markLine":{"type":["Object"],"description":"

Use a line in the chart to illustrate.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"symbol":{"type":["string","Array"],"description":"

Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned separately. See data.symbol for more format information.

\n"},"symbolSize":{"type":["number","Array"],"description":"

Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned separately.

\n

Attention: You cannot assign width and height separately as normal symbolSize.

\n"},"symbolOffset":{"type":["number","string","Array"],"description":"

Offset of symbol relative to original position. It can be an array for two ends, or assigned separately. If you want to set specific horizontal/vertical offset for single end, you can set it as a 2d array. For example,

\n
symbolOffset: [\n    [-10, 20],    // offset of starting symbol\n    ['50%', 100]  // offset of ending symbol\n]\n
\n
\n

Since v5.1.0

\n
\n"},"precision":{"type":["number"],"description":"

Precision of marking line value, which is useful when displaying average value mark line.

\n","default":2},"label":{"type":["Object"],"description":"

Mark line text.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"

Mark line style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark line.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.

\n
    \n
  1. Assign coordinate according to container with x, y attribute, in which pixel values and percentage are supported.
    2. \n
\n
    \n

  1. Assign coordinate position with coord attribute, in which 'min', 'max', 'average' are supported for each dimension.

    \n
    2. \n

  2. Use type attribute to mark the maximum and minimum values in the series, in which valueIndex or valueDim can be used to assign the dimension.

    \n
    3. \n

  3. You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning xAxis or yAxis. See scatter-weight for example.

    \n
    4. \n
\n

When multiple attributes exist, priority is as the above order.

\n

You may also set the type of mark line through type, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through valueIndex.

\n
data: [\n\n{\n        name: 'average line',\n        // 'average', 'min', and 'max' are supported\n        type: 'average'\n    },\n    {\n        name: 'Horizontal line with Y value at 100',\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: 'Minimum to Maximum',\n            type: 'min'\n        },\n        {\n            type: 'max'\n        }\n    ],\n[\n        {\n            name: 'Markline between two points',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: 'max',\n        x: '90%'\n    }, {\n        type: 'max'\n    }],\n[\n        {\n            name: 'Mark line between two points',\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Data of the starting point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of starting point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

starting point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of starting point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Data of the ending point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Special label types, are used to label maximum value, minimum value and so on.

\n

Options are:

\n
    \n
  • 'min' minimum value.
    • \n
  • 'max' maximum value.
    • \n
  • 'average' average value.
    • \n
  • 'median' median value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be 0 (for xAxis, or radiusAxis), or 1 (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Works only when type is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like x, or angle for line charts, or open, or close for candlestick charts.

\n"},"coord":{"type":["Array"],"description":"

Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be x, and y for rectangular coordinates, or radius, and angle for polar coordinates.

\n

Notice: For axis with axis.type 'category':

\n
    \n
  • If coord value is number, it represents index of axis.data.
    • \n
  • If coord value is string, it represents concrete value in axis.data. Please notice that in this case xAxis.data must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.
    • \n
\n

For example:

\n
{\n    xAxis: {\n        type: 'category',\n        data: ['5', '6', '9', '13', '19', '33']\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: 'line',\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n                // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n            }]\n        }\n    }\n}\n
\n"},"name":{"type":["string"],"description":"

Name of the marker. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

X position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

Y position according to container, in pixel.

\n","uiControl":{"type":"percent","default":"0"}},"xAxis":{"type":["number","string"],"description":"

Markline at x at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A vertical line with X valued 100',\n    xAxis: 100\n}]\n

or if xAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A vertical line with X valued "2020-01-01"',\n    xAxis: '2020-01-01'\n}]\n
"},"yAxis":{"type":["number","string"],"description":"

Markline at y at given value, which only works for single data item. Example:

\n
data: [{\n    name: 'A horizontal line with X valued 100',\n    yAxis: 100\n}]\n

or if yAxis is in 'time' type, it can be set as:

\n
{\n    name: 'A horizontal line with Y valued "2020-01-01"',\n    yAxis: '2020-01-01'\n}]\n
"},"value":{"type":["number"],"description":"

Label value, which can be ignored.

\n"},"symbol":{"type":["string"],"description":"\n\n

Symbol of ending point.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","uiControl":{"type":"icon","default":"circle"}},"symbolSize":{"type":["number","Array"],"description":"\n\n

ending point symbol size. It can be set to single numbers like 10, or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.

\n","uiControl":{"type":"number","min":"0"}},"symbolRotate":{"type":["number"],"description":"\n\n

Rotate degree of ending point symbol. The negative value represents clockwise. Note that when symbol is set to be 'arrow' in markLine, symbolRotate value will be ignored, and compulsively use tangent angle.

\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"symbolKeepAspect":{"type":["boolean"],"description":"\n\n

Whether to keep aspect for symbols in the form of path://.

\n","uiControl":{"type":"boolean","clean":"true"},"default":false},"symbolOffset":{"type":["Array"],"description":"\n\n

Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.

\n

For example, [0, '-50%'] means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.

\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"},"default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"

Line style of this data item, which will be merged with lineStyle of starting point and ending point.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"

Label of this data item, which will be merged with label of starting point and ending point.

\n","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"curveness":{"type":["number"],"description":"\n\n

Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"},"default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"

Whether show label or not.

\n","default":true},"position":{"type":["string"],"description":"

Positions of labels can be:

\n
    \n
  • 'start' starting point of the line.
    • \n
  • 'middle' middle point of the line.
    • \n
  • 'end' ending point of the line.
    • \n
\n

Since v4.7.0, more label positions are supported: 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'.

\n

'insideMiddleBottom' is the same as 'middle'. Position is as the following chart.

\n

The distance between labels and mark lines can be set with label.distance.

\n\n\n","default":"'end'"},"distance":{"type":["number","Array"],"description":"

The distance between labels and mark lines. If it's an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it's a number, then the horizontal and vertical distances are the same.

\n"},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {d}: the percent.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {d}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"markArea":{"type":["Object"],"description":"

Used to mark an area in chart. For example, mark a time interval.

\n","properties":{"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"label":{"type":["Object"],"description":"

Label in mark area.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"

Style of the mark area.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"emphasis":{"type":["Object"],"description":"

Emphasis status of mark area.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state. Whether to blur follows the series.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"data":{"type":["*"],"description":"

The scope of the area is defined by data, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:

\n
    \n
  1. Specify the coordinate in screen coordinate system using x, y, where the unit is pixel (e.g., the value is 5), or percent (e.g., the value is '35%').
    2. \n
\n
    \n

  1. Specify the coordinate in data coordinate system (i.e., cartesian) using\ncoord, which can be also set as 'min', 'max', 'average' (e.g, coord: [23, 'min'], or coord: ['average', 'max']).

    \n
    2. \n

  2. Locate the point on the min value or max value of series.data using type, where valueIndex or valueDim can be used to specify the dimension on which the min, max or average are calculated.

    \n
    3. \n
  3. If in cartesian, you can only specify xAxis or yAxis to define a mark area based on only X or Y axis, see sample scatter-weight
    4. \n
\n

The priority follows as above if more than one above definition used.

\n
data: [\n\n\n    [\n        {\n            name: 'From average to max',\n            type: 'average'\n        },\n        {\n            type: 'max'\n        }\n    ],\n\n    [\n        {\n            name: 'Mark area between two points in data coordiantes',\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: 'From 60 to 80',\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: 'Mark area covers all data'\n            coord: ['min', 'min']\n        },\n        {\n            coord: ['max', 'max']\n        }\n    ],\n[\n        {\n            name: 'Mark area in two screen points',\n            x: 100,\n            y: 100\n        }, {\n            x: '90%',\n            y: '10%'\n        }\n    ]\n]\n
","properties":{"0":{"type":["Object"],"description":"

Specify the left-top point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"

Specify the right-bottom point.

\n","properties":{"type":{"type":["string"],"description":"\n\n

Specify this item is on min or max or average value.

\n

Options:

\n
    \n
  • 'min' max value.
    • \n
  • 'max' min value.
    • \n
  • 'average' average value.
    • \n
\n","uiControl":{"type":"enum","options":"min,max,average"}},"valueIndex":{"type":["number"],"description":"\n\n

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be 0 (means xAxis, radiusAxis) or 1 (means yAxis, angleAxis),\nusing the dimension of the first axis by default.

\n","uiControl":{"type":"number","min":"0","max":"1","step":"1"}},"valueDim":{"type":["string"],"description":"

Specify the dimension on which min, max, average are calculated,\navailable when type used.\nThe value can be the name of the dimension (for example, the value can be x, angle in line chart, and open, close in candlestick).

\n"},"coord":{"type":["Array"],"description":"

The format is [start coordinate, end coordinate], where the coordinate system can be x, y on cartesian, or radius, angle on polar.

\n"},"name":{"type":["string"],"description":"

Name of the marker, which will display as a label. Can be used as a template variable data name {b} in label formatter.

\n","default":"''"},"x":{"type":["number"],"description":"\n\n

x value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"y":{"type":["number"],"description":"\n\n

y value on screen coordinate system, can be pixel number (like 5), or percent value (like '20%').

\n","uiControl":{"type":"percent","default":"0"}},"value":{"type":["number"],"description":"

value of the item, not necessary.

\n"},"itemStyle":{"type":["Object"],"description":"

Style of the item.\nitemStyle of start point and end point will be merged together.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"

Label style of the item.\nLabel style of start point and end point will be merged together.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'top'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"formatter":{"type":["string","Function"],"description":"

Data label formatter, which supports string template and callback function. In either form, \\n is supported to represent a new line.

\n

String template

\n

Model variation includes:

\n
    \n
  • {a}: series name.
    • \n
  • {b}: the name of a data item.
    • \n
  • {c}: the value of a data item.
    • \n
  • {@xxx}: the value of a dimension named 'xxx', for example, {@product} refers the value of 'product' dimension.
    • \n
  • {@[n]}: the value of a dimension at the index of n, for example, {@[3]} refers the value at dimensions[3].
    • \n
\n

example:

\n
formatter: '{b}: {@score}'\n
\n

Callback function

\n

Callback function is in form of:

\n
(params: Object|Array) => string\n
\n

where params is the single dataset needed by formatter, which is formed as:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"false","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in Pictorial bar chart .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in Pictorial bar chart , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

Theme river

\n

It is a special flow graph which is mainly used to present the changes of an event or theme during a period.

\n

Sample:

\n\n\n\n\n


\nvisual encoding:

\n

The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.

\n

What's more, the time attribute of the orinigal dataset would map to a single time axis.

\n","properties":{"type":{"type":["string"],"description":"","default":"'themeRiver'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'data'"},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in .

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"left":{"type":["string","number"],"description":"

Distance between thmemRiver component and the left side of the container.

\n

left can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.

\n

If the left value is set to be 'left', 'center', or 'right', then the component will be aligned automatically based on position.

\n","default":"5%"},"top":{"type":["string","number"],"description":"

Distance between thmemRiver component and the top side of the container.

\n

top can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'top', 'middle', or 'bottom'.

\n

If the top value is set to be 'top', 'middle', or 'bottom', then the component will be aligned automatically based on position.

\n","default":"5%"},"right":{"type":["string","number"],"description":"

Distance between thmemRiver component and the right side of the container.

\n

right can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"5%"},"bottom":{"type":["string","number"],"description":"

Distance between thmemRiver component and the bottom side of the container.

\n

bottom can be a pixel value like 20; it can also be a percentage value relative to container width like '20%'.

\n","default":"5%"},"width":{"type":["string","number"],"description":"

Width of thmemRiver component.

\n","default":null},"height":{"type":["string","number"],"description":"

Height of thmemRiver component.

\n

Notes: \nThe positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.

\n","default":null},"coordinateSystem":{"type":["string"],"description":"

coordinate. The theme river adopts single time axis.

\n","default":"\"single\""},"boundaryGap":{"type":["Array"],"description":"

The boundary gap of the direction orthogonal with coordinate axis in diagram, which is set to adjust the diagram position, keeping it on the screen center instead of the upside or downside of the screen.

\n","default":"[\"10%\", \"10%\"]"},"singleAxisIndex":{"type":["number"],"description":"

The index of single time axis, which defaults to be 0 because it contains only one axis.

\n","default":0},"label":{"type":["Object"],"description":"

label describes style of text labels with which each ribbon-shape river branch corresponds in theme river.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'left'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"minMargin":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimal margin between labels. Used when label has layout.

\n"},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"'#000'"},"default":"'#000'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"11","min":"1","step":"1"},"default":11},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"itemStyle":{"type":["Object"],"description":"

style of each ribbon-shape river branch in theme river.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"

Configurations of emphasis state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

Whether to disable the emphasis state.

\n

When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
\n
    \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n

Example:

\n
emphasis: {\n    focus: 'series',\n    blurScope: 'coordinateSystem'\n}\n
\n\n\n\n\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'left'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"'#000'"},"default":"'#000'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"11","min":"1","step":"1"},"default":11},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color. Since v5.2.0, it can be set to 'inherit' in the emphasis state to disable color highlight.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of blur state.

\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'left'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"'#000'"},"default":"'#000'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"11","min":"1","step":"1"},"default":11},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configurations of select state.

\n","properties":{"disabled":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v5.3.0

\n
\n

If data can be selected. Available when selectedMode is used. Can be used to disable selection for part of the data.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show label.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"position":{"type":["string","Array"],"description":"\n\n\n\n

Label position.

\n

Followings are the options:

\n
    \n

  • [x, y]

    \n

    Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:

    \n
      // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: ['50%', '50%']\n
    \n
    • \n

  • 'top'

    \n
    • \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomRight'
    • \n
\n

See: label position.

\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"},"default":"'left'"},"distance":{"type":["number"],"description":"\n\n

Distance to the host graphic element.

\n

It is valid only when position is string value (like 'top'、'insideRight').

\n

See: label position.

\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"},"default":5},"rotate":{"type":["number"],"description":"\n\n

Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.

\n

See: label rotation.

\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"offset":{"type":["Array"],"description":"\n\n

Whether to move text slightly. For example: [30, 40] means move 30 horizontally and move 40 vertically.

\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"'#000'"},"default":"'#000'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"11","min":"1","step":"1"},"default":11},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"},"rich":{"type":["Object"],"description":"

"Rich text styles" can be defined in this rich property. For example:

\n
label: {\n    // Styles defined in 'rich' can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `'\\n'` is the newline character.\n    formatter: [\n        '{a|Style "a" is applied to this snippet}'\n        '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n    ].join('\\n'),\n\n    rich: {\n        a: {\n            color: 'red',\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: 'xxx/xxx.jpg'\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: 'Microsoft YaHei',\n            borderColor: '#449933',\n            borderRadius: 4\n        },\n        ...\n    }\n}\n
\n

For more details, see Rich Text please.

\n","properties":{"":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"align":{"type":["string"],"description":"\n\n

Horizontal alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'left'
    • \n
  • 'center'
    • \n
  • 'right'
    • \n
\n

If align is not set in rich, align in parent level will be used. For example:

\n
{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"left,center,right"}},"verticalAlign":{"type":["string"],"description":"\n\n

Vertical alignment of text, automatic by default.

\n

Options are:

\n
    \n
  • 'top'
    • \n
  • 'middle'
    • \n
  • 'bottom'
    • \n
\n

If verticalAlign is not set in rich, verticalAlign in parent level will be used. For example:

\n
{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n
\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"backgroundColor":{"type":["string","Object"],"description":"\n\n

Background color of the text fragment.

\n

Can be color string, like '#123234', 'red', 'rgba(0,23,11,0.3)'.

\n

Or image can be used, for example:

\n
backgroundColor: {\n    image: 'xxx/xxx.png'\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n
\n

width or height can be specified when using background image, or\nauto adapted by default.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"},"default":"'transparent'"},"borderColor":{"type":["Color"],"description":"\n\n

Border color of the text fragment.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color","default":"#fff"}},"borderWidth":{"type":["number"],"description":"\n\n

Border width of the text fragment.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

the text fragment border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderRadius":{"type":["number"],"description":"\n\n

Border radius of the text fragment.

\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"},"default":0},"padding":{"type":["number","Array"],"description":"\n\n

Padding of the text fragment, for example:

\n
    \n
  • padding: [3, 4, 5, 6]: represents padding of [top, right, bottom, left].
    • \n
  • padding: 4: represents padding: [4, 4, 4, 4].
    • \n
  • padding: [3, 4]: represents padding: [3, 4, 3, 4].
    • \n
\n

Notice, width and height specifies the width and height of the content, without padding.

\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":0},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text block.

\n","uiControl":{"type":"color"},"default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"\n\n

Show blur of the text block.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"shadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text block.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"width":{"type":["number","string"],"description":"

Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

width can also be percent string, like '100%', which represents the percent of contentWidth (that is, the width without padding) of its container box. It is based on contentWidth because that each text fragment is layout based on the content box, where it makes no sense that calculating width based on outerWith in prectice.

\n

Notice, width and height only work when rich specified.

\n"},"height":{"type":["number","string"],"description":"

Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see backgroundColor).

\n

Notice, width and height specifies the width and height of the content, without padding.

\n

Notice, width and height only work when rich specified.

\n"},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n

If set as 'inherit', the color will assigned as visual color, such as series color.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0}}}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"data":{"type":["Array"],"description":"
data: [\n    ["2015/11/09",10,"DQ"],\n    ["2015/11/10",10,"DQ"],\n    ["2015/11/11",10,"DQ"],\n    ["2015/11/08",10,"SS"],\n    ["2015/11/09",10,"SS"],\n    ["2015/11/10",10,"SS"],\n    ["2015/11/11",10,"SS"],\n    ["2015/11/12",10,"SS"],\n    ["2015/11/13",10,"QG"],\n    ["2015/11/08",10,"QG"],\n    ["2015/11/11",10,"QG"],\n    ["2015/11/13",10,"QG"],\n]\n
\n

data specification:

\n

As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. Once they are beyond the main river, the layout would be wrong. That is because a baseline should be calculated to draw each event as ribbon shape when the whole diagram layout is calculated. As the example above, the event "SS" is a main river. After dispose, we would complete these 3 default time points with the format of ["2015/11/08",0,"DQ"], ["2015/11/12",0,"DQ"], ［"2015/11/13",0,"DQ"］, making it align with the main river. From what is mentioned, we could set default value on any position of a complete time period.

\n","items":{"type":"Object","properties":{"date":{"type":["string"],"description":"

the time attribute of time and theme.

\n"},"value":{"type":["number"],"description":"

the value of an event or theme at a time point.

\n"},"name":{"type":["string"],"description":"

the name of an event or theme.

\n"}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}},{"type":["Object"],"description":"

custom series

\n

custom series supports customizing graphic elements, and then generate more types of charts.

\n

echarts manages the creation, deletion, animation and interaction with other components (like dataZoom、visualMap), which frees developers from handling those issue themselves.

\n

For example, a "x-range" chart is made by custom sereis:

\n\n\n\n

More samples of custom series

\n

A tutotial of custom series

\n


\nCustomize the render logic (in renderItem method)

\n

custom series requires developers to write a render logic by themselves. This render logic is called renderItem.

\n

For example:

\n
var option = {\n    ...,\n    series: [{\n        type: 'custom',\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape && {\n                type: 'rect',\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n
\n

renderItem will be called on each data item.

\n

renderItem provides two parameters:

\n
    \n
  • params: provides info about the current series and data and coordinate system.
    • \n
  • api: includes some methods.
    • \n
\n

renderItem method should returns graphic elements definitions.See renderItem.return.

\n

Generally, the main process of renderItem is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in renderItem.arguments.api are always used in this procedure:

\n
    \n
  • api.value(...) is used to retrieve value from data. For example, api.value(0) retrieve the value of the first dimension in the current data item.
    • \n
  • api.coord(...) is used to convert data to coordinate. For example, var point = api.coord([api.value(0), api.value(1)]) converet the data to the point on the current coordinate system.
    • \n
\n

Sometimes api.size(...) method is needed, which calculates the size on the coordinate system by a given data range.

\n

Moreover, api.style(...) method can be used to set style. It provides not only the style settings specified in series.itemStyle, but also the result of visual mapping. This method can also be called like api.style({fill: 'green', stroke: 'yellow'}) to override those style settings.

\n


\nDimension mapping (by encode and dimension option)

\n

In most cases, series.encode needs to be specified when using custom series series, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.

\n

encode.tooltip and encode.label can also be specified to define the content of default tooltip and label.\nseries.dimensions can also be specified to defined names of each dimensions, which will be displayed in tooltip.

\n

For example:

\n
series: {\n    type: 'custom',\n    renderItem: function () {\n        ...\n    },\n    encode: {\n        x: [2, 4, 3],\n        y: 1,\n        label: 0,\n        tooltip: [2, 4, 3]\n    }\n}\n
\n


\nControlled by dataZoom

\n

When use custom series with dataZoom, dataZoom.filterMode usually be set as 'weakFilter', which prevent dataItem from being filtered when only part of its dimensions are out of the current data window.

\n


\n
\nDifference between dataIndex and dataIndexInside

\n
    \n
  • dataIndex is the index of a dataItem in the original data.
    • \n
  • dataIndexInside is the index of a dataItem in the current data window (see dataZoom.
    • \n
\n

renderItem.arguments.api uses dataIndexInside as the input parameter but not dataIndex, because conversion from dataIndex to dataIndexInside is time-consuming.

\n


\nEvent listener

\n
chart.setOption({\n    // ...\n    series: {\n        type: 'custom',\n        renderItem: function () {\n            // ...\n            return {\n                type: 'group',\n                children: [{\n                    type: 'circle'\n                    // ...\n                }, {\n                    type: 'circle',\n                    name: 'aaa',\n                    // User specified info, available\n                    // in event handler.\n                    info: 12345,\n                    // ...\n                }]\n            };\n        }\n    }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n    // When the element with name 'aaa' clicked,\n    // this method called.\n    console.log(params.info);\n});\n
\n","properties":{"type":{"type":["string"],"description":"","default":"'custom'"},"id":{"type":["string"],"description":"

Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

\n"},"name":{"type":["string"],"description":"

Series name used for displaying in tooltip and filtering with legend, or updating data and configuration with setOption.

\n"},"colorBy":{"type":["string"],"description":"\n\n\n\n
\n

Since v5.2.0

\n
\n

The policy to take color from option.color. Valid values:

\n
    \n
  • 'series': assigns the colors in the palette by series, so that all data in the same series are in the same color;
    • \n
  • 'data': assigns colors in the palette according to data items, with each data item using a different color.
    • \n
\n","uiControl":{"type":"enum","options":"series,data"},"default":"'series'"},"legendHoverLink":{"type":["boolean"],"description":"\n\n

Whether to enable highlighting chart when legend is being hovered.

\n","uiControl":{"type":"boolean","default":"true"},"default":true},"coordinateSystem":{"type":["string"],"description":"

The coordinate used in the series, whose options are:

\n
    \n

  • null or 'none'

    \n

    No coordinate.

    \n
    • \n
\n
    \n

  • 'cartesian2d'

    \n

    Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with xAxisIndex and yAxisIndex to assign the corresponding axis component.

    \n
    • \n
\n
    \n

  • 'polar'

    \n

    Use polar coordinates, with polarIndex to assign the corresponding polar coordinate component.

    \n
    • \n
\n
    \n

  • 'geo'

    \n

    Use geographic coordinate, with geoIndex to assign the corresponding geographic coordinate components.

    \n
    • \n
\n
    \n

  • 'calendar'

    \n

    Use calendar coordinates, with calendarIndex to assign the corresponding calendar coordinate components.

    \n
    • \n
\n
    \n

  • 'none'

    \n

    Do not use coordinate system.

    \n
    • \n
\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"

Index of x axis to combine with, which is useful for multiple x axes in one chart.

\n","default":0},"yAxisIndex":{"type":["number"],"description":"

Index of y axis to combine with, which is useful for multiple y axes in one chart.

\n","default":0},"polarIndex":{"type":["number"],"description":"

Index of polar coordinate to combine with, which is useful for multiple polar axes in one chart.

\n","default":0},"geoIndex":{"type":["number"],"description":"

Index of geographic coordinate to combine with, which is useful for multiple geographic axes in one chart.

\n","default":0},"calendarIndex":{"type":["number"],"description":"

Index of calendar coordinates to combine with, which is useful for multiple calendar coordinates in one chart.

\n","default":0},"renderItem":{"type":["Function"],"description":"

custom series requires developers to write a render logic by themselves. This render logic is called renderItem.

\n

For example:

\n
var option = {\n    ...,\n    series: [{\n        type: 'custom',\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape && {\n                type: 'rect',\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n
\n

renderItem will be called on each data item.

\n

renderItem provides two parameters:

\n
    \n
  • params: provides info about the current series and data and coordinate system.
    • \n
  • api: includes some methods.
    • \n
\n

renderItem method should returns graphic elements definitions.See renderItem.return.

\n

Generally, the main process of renderItem is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in renderItem.arguments.api are always used in this procedure:

\n
    \n
  • api.value(...) is used to retrieve value from data. For example, api.value(0) retrieve the value of the first dimension in the current data item.
    • \n
  • api.coord(...) is used to convert data to coordinate. For example, var point = api.coord([api.value(0), api.value(1)]) converet the data to the point on the current coordinate system.
    • \n
\n

Sometimes api.size(...) method is needed, which calculates the size on the coordinate system by a given data range.

\n

Moreover, api.style(...) method can be used to set style. It provides not only the style settings specified in series.itemStyle, but also the result of visual mapping. This method can also be called like api.style({fill: 'green', stroke: 'yellow'}) to override those style settings.

\n","properties":{"arguments":{"type":["*"],"description":"

Parameters of renderItem.

\n","properties":{"params":{"type":["Object"],"description":"

The first parameter of renderItem, including:

\n
{\n    context: // {string} An object that developers can store something temporarily here. Life cycle: current round of rendering.\n    seriesId: // {string} The id of this series.\n    seriesName: // {string} The name of this series.\n    seriesIndex: // {number} The index of this series.\n    dataIndex: // {number} The index of this data item.\n    dataIndexInside: // {number} The index of this data item in the current data window (see dataZoom).\n    dataInsideLength: // {number} The count of data in the current data window (see dataZoom).\n    actionType: // {string} The type of action that trigger this render.\n    coordSys: // coordSys is variable by different types of coordinate systems:\n    coordSys: {\n        type: 'cartesian2d',\n        x: // {number} x of grid rect\n        y: // {number} y of grid rect\n        width: // {number} width of grid rect\n        height: // {number} height of grid rect\n    },\n    coordSys: {\n        type: 'calendar',\n        x: // {number} x of calendar rect\n        y: // {number} y of calendar rect\n        width: // {number} width of calendar rect\n        height: // {number} height of calendar rect\n        cellWidth: // {number} calendar cellWidth\n        cellHeight: // {number} calendar cellHeight\n        rangeInfo: {\n            start: // date start of calendar.\n            end: // date end of calendar.\n            weeks: // number of weeks in calendar.\n            dayCount: // day count in calendar.\n        }\n    },\n    coordSys: {\n        type: 'geo',\n        x: // {number} x of geo rect\n        y: // {number} y of geo rect\n        width: // {number} width of geo rect\n        height: // {number} height of geo rect\n        zoom: // {number} zoom ratio, 1 if no zoom, 0.5 means shrink to 50%.\n    },\n    coordSys: {\n        type: 'polar',\n        cx: // {number} x of polar center.\n        cy: // {number} y of polar center.\n        r: // {number} outer radius of polar.\n        r0: // {number} inner radius of polar.\n    },\n    coordSys: {\n        type: 'singleAxis',\n        x: // {number} x of singleAxis rect\n        y: // {number} y of singleAxis rect\n        width: // {number} width of singleAxis rect\n        height: // {number} height of singleAxis rect\n    }\n}\n
\n

Difference between dataIndex and dataIndexInside:

\n
    \n
  • dataIndex is the index of a dataItem in the original data.
    • \n
  • dataIndexInside is the index of a dataItem in the current data window (see dataZoom.
    • \n
\n

renderItem.arguments.api uses dataIndexInside as the input parameter but not dataIndex, because conversion from dataIndex to dataIndexInside is time-consuming.

\n"},"api":{"type":["Object"],"description":"

The second parameter of renderItem.

\n","properties":{"value":{"type":["Function"],"description":"

Get value on the given dimension.

\n
@param {number} dimension The given dimension. (index from 0).\n@param {number} [dataIndexInside] In most cases it is not necessary.\n@return {number} The value.\n
"},"coord":{"type":["Function"],"description":"

Convert data to coordinate.

\n
@param {Array.<number>} data.\n@return {Array.<number>} Point on canvas, at least includes [x, y].\n        In polar, it also contains:\n        polar: [x, y, radius, angle]\n
"},"size":{"type":["Function"],"description":"

Get the size by the given data range.

\n

For example, in cartesian2d, suppose calling api.size([2, 4]) returns [12.4, 55]. It represents that on x axis, data range 2 corresponds to size 12.4, and on y axis data range 4 corresponds to size 55.

\n

In some coordinate systems (for example, polar) or when log axis is used, the size is different in different point. So the second parameter is necessary to calculate size on the given point.

\n
@param {Array.<number>} dataSize Data range.\n@param {Array.<number>} dataItem The point where the size will be calculated.\n@return {Array.<number>} The size.\n
"},"style":{"type":["Function"],"description":"

The method obtains style info defined in series.itemStyle, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to style attribute of graphic element definition directly. Developers can also override style info by calling this method like this: api.style({fill: 'green', stroke: 'yellow'}).

\n
@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n
"},"styleEmphasis":{"type":["Function"],"description":"

The method obtains style info defined in series.itemStyle.emphasis, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to style attribute of graphic element definition directly. Developers can also override style info by calling this method like this: api.style({fill: 'green', stroke: 'yellow'}).

\n
@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n
"},"visual":{"type":["Function"],"description":"

Get the visual info. It is rarely be used.

\n
@param {string} visualType 'color', 'symbol', 'symbolSize', ...\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {string|number} The value of visual.\n
"},"barLayout":{"type":["Function"],"description":"

When barLayout is needed, (for example, when attaching some extra graphic elements to bar chart), this method can be used to obtain bar layout info.

\n

See a sample.

\n
@param {Object} opt\n@param {number} opt.count How many bars in each group.\n@param {number|string} [opt.barWidth] Width of a bar.\n        Can be an absolute value like `40` or a percent value like `'60%'`.\n        The percent is based on the calculated category width.\n@param {number|string} [opt.barMaxWidth] Max width of a bar.\n        Can be an absolute value like `40` or a percent value like `'60%'`.\n        The percent is based on the calculated category width.\n        Has higher priority than `opt.barWidth`.\n@param {number|string} [opt.barMinWidth] Min width of a bar.\n        Can be an absolute value like `40` or a percent value like `'60%'`.\n        The percent is based on the calculated category width.\n        Has higher priority than `opt.barWidth`.\n@param {number} [opt.barGap] Gap of bars in a group.\n@param {number} [opt.barCategoryGap] Gap of groups.\n@return {Array.<Object>} [{\n        width: {number} Width of a bar.\n        offset: {number} Offset of a bar, based on the left most edge.\n        offsetCenter: {number} bar Offset of a bar, based on the center of the bar.\n    }, ...]\n
"},"currentSeriesIndices":{"type":["Function"],"description":"

Obtain the current series index. Notice that the currentSeriesIndex is different from seriesIndex when legend is used to filter some series.

\n
@return {number}\n
"},"font":{"type":["Function"],"description":"

Obtain font string, which can be used on style setting directly.

\n
@param {Object} opt\n@param {string} [opt.fontStyle]\n@param {number} [opt.fontWeight]\n@param {number} [opt.fontSize]\n@param {string} [opt.fontFamily]\n@return {string} font string.\n
"},"getWidth":{"type":["Function"],"description":"
@return {number} Width of echarts container.\n
"},"getHeight":{"type":["Function"],"description":"
@return {number} Height of echarts container.\n
"},"getZr":{"type":["Function"],"description":"
@return {module:zrender} zrender instance.\n
"},"getDevicePixelRatio":{"type":["Function"],"description":"
@return {number} The current devicePixelRatio.\n
"}}}}},"return":{"type":["Object"],"description":"

renderItem should returns graphic element definitions. Each graphic element is an object. See graphic for detailed info. (But width\\height\\top\\bottom is not supported here)

\n

If nothing should be rendered in this data item, just returns nothing.

\n

For example:

\n
// Returns a rectangular.\n{\n    type: 'rect',\n    shape: {\n        x: x, y: y, width: width, height: height\n    },\n    style: api.style()\n}\n
\n
// Returns a group of elements.\n{\n    type: 'group',\n    // If diffChildrenByName is set as `true`, `child.name` will be used\n    // to diff children, which improves animation transition but degrade\n    // performance. The default value is `false`.\n    // diffChildrenByName: true,\n    children: [{\n        type: 'circle',\n        shape: {\n            cx: cx, cy: cy, r: r\n        },\n        style: api.style()\n    }, {\n        type: 'line',\n        shape: {\n            x1: x1, y1: y1, x2: x2, y2: y2\n        },\n        style: api.style()\n    }]\n}\n
\n"},"return_group":{"type":["Object"],"description":"

group is the only type that can contain children, so that a group of elements can be positioned and transformed together.

\n

Note that if any of its child is null, it means the child no longer exists. So if a group contains an element that is set to be null/undefined in a future setOption call, it should remove the previous element at the same index. If a child should not change, it should be {} in the new option. And a group can only contain children as null/undefined/{} if they exist in the previous setOption.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"group"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"width":{"type":["number"],"description":"

Specify width of this group.

\n

This width is only used for the positioning of its children.

\n

When width is 0, children can also be positioned according to its parent using left: 'center'.

\n","default":0},"height":{"type":["number"],"description":"

Specify height of this group.

\n

This height is only used for the positioning of its children.

\n

When height is 0, children can also be positioned according to its parent using top: 'middle'.

\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"

In custom series, when diffChildrenByName is set as true, for each group returned from renderItem, "diff" will be performed to its children according to the name attribute of each graphic elements. Here "diff" means that map the coming graphic elements to the existing graphic elements when repainting according to name, which enables the transition animation if data is modified.

\n

But notice that the operation is performance consuming, do not use it for large data amount.

\n","default":false},"children":{"type":["Array"],"description":"

A list of children, each item is a declaration of an element.

\n"}}},"return_path":{"type":["Object"],"description":"

Use SVG PathData to describe a path. Can be used to draw icons or any other shapes fitting the specified size by auto transforming.

\n

See examples:\nicons and shapes.

\n

About width/height, cover/contain, see\nlayout.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"path"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"pathData":{"type":["string"],"description":"

SVG PathData.

\n

For example, 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z'.

\n

If width, height, x and y specified, pathData will be transformed to fit the defined rect. If they are not specified, do not do that.

\n

layout can be used to specify the transform strategy.

\n

See examples:\nicons and shapes.

\n"},"d":{"type":["string"],"description":"

Alias of pathData.

\n"},"layout":{"type":["string"],"description":"

If width, height, x and y specified, pathData will be transformed to fit the defined rect.

\n

layout can be used to specify the transform strategy.

\n

Optional value:

\n
    \n
  • 'center': Keep aspect ratio, put the path in the center of the rect, expand as far as possible but never overflow.
    • \n
  • 'cover': Transform the path according to the aspect ratio of the rect, fill the rect and do not overflow.
    • \n
\n","default":"'center'"},"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"width":{"type":["number"],"description":"

The width of the shape of the element.

\n","default":0},"height":{"type":["numbr"],"description":"

The height of the shape of the element.

\n","default":0},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_image":{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"image"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"

Specify content of the image, can be a URL, or dataURI.

\n"},"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"width":{"type":["number"],"description":"

The width of the shape of the element.

\n","default":0},"height":{"type":["numbr"],"description":"

The height of the shape of the element.

\n

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","default":0},"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_text":{"type":["Object"],"description":"

Text block.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"text"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"

Text content. \\n can be used as a line break.

\n","default":"''"},"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"font":{"type":["string"],"description":"

Font size, font type, font weight, font color, follow the form of css font.

\n

For example:

\n
// size | family\nfont: '2em "STHeiti", sans-serif'\n\n// style | weight | size | family\nfont: 'italic bolder 16px cursive'\n\n// weight | size | family\nfont: 'bolder 2em "Microsoft YaHei", sans-serif'\n
"},"textAlign":{"type":["string"],"description":"

Text horizontal alignment. Optional values: 'left', 'center', 'right'.

\n

'left' means the left side of the text block is specified by the style.x, while 'right' means the right side of the text block is specified by style.y.

\n","default":"'left'"},"width":{"type":["number"],"description":"

Text block width. Used for overflow calculation.

\n"},"overflow":{"type":["string"],"description":"

When the text content exceeds the width, the text display strategy is: 'break', 'breakAll', 'truncate', 'none'.

\n
    \n
  • 'break' is to try to ensure that the complete word is not truncated (similar to CSS word-break: break-word;)
    • \n
  • 'breakAll': can break at any character
    • \n
  • 'truncate': truncate the text to display '...'，you can use ellipsis to customize the display of the ellipsis
    • \n
  • 'none': no line break
    • \n
\n"},"ellipsis":{"type":["string"],"description":"

When overflow is set to 'truncate', the default is ....

\n"},"textVerticalAlign":{"type":["string"],"description":"

Text vertical alignment. Optional values: 'top', 'middle', 'bottom'.

\n

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n"},"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_rect":{"type":["Object"],"description":"

Rectangle element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"rect"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"

The x value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"y":{"type":["number"],"description":"

The y value of the left-top corner of the element in the coordinate system of its parent.

\n","default":0},"width":{"type":["number"],"description":"

The width of the shape of the element.

\n","default":0},"height":{"type":["numbr"],"description":"

The height of the shape of the element.

\n","default":0},"r":{"type":["Array"],"description":"

Specify border radius of the rectangular here. Generally, r should be [topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius], where each item is a number.

\n

Abbreviation is enabled, for example:

\n
    \n
  • r: 1 means [1, 1, 1, 1]
    • \n
  • r: [1] means [1, 1, 1, 1]
    • \n
  • r: [1, 2] means [1, 2, 1, 2]
    • \n
  • r: [1, 2, 3] means [1, 2, 3, 2]
    • \n
\n"},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_circle":{"type":["Object"],"description":"

Circle element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"circle"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_ring":{"type":["Object"],"description":"

Ring element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"ring"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"r0":{"type":["number"],"description":"

Inside radius.

\n","default":0},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_sector":{"type":["Object"],"description":"

Sector element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"sector"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"r0":{"type":["number"],"description":"

Inside radius.

\n","default":0},"startAngle":{"type":["number"],"description":"

start angle, in radian.

\n","default":0},"endAngle":{"type":["number"],"description":"

end angle, in radian.

\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"

Whether draw clockwise.

\n","default":true},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_arc":{"type":["Object"],"description":"

Arc element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"arc"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"

The x value of the center of the element in the coordinate system of its parent.

\n","default":0},"cy":{"type":["numbr"],"description":"

The y value of the center of the element in the coordinate system of its parent.

\n","default":0},"r":{"type":["number"],"description":"

Outside radius.

\n","default":0},"r0":{"type":["number"],"description":"

Inside radius.

\n","default":0},"startAngle":{"type":["number"],"description":"

start angle, in radian.

\n","default":0},"endAngle":{"type":["number"],"description":"

end angle, in radian.

\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"

Whether draw clockwise.

\n","default":true},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":null},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":1},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_polygon":{"type":["Object"],"description":"

Polygon element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"polygon"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"

A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...].

\n"},"smooth":{"type":["number","string"],"description":"

Whether smooth the line.

\n
    \n
  • If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of [0, 1].
    • \n
  • If the value is 'spline', Catmull-Rom spline interpolation is used.
    • \n
\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"

Whether prevent the smooth process cause the line out of the bounding box.

\n

Only works when smooth is number (bezier smooth).

\n","default":false},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_polyline":{"type":["Object"],"description":"

Polyline element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"polyline"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"

A list of points, which defines the shape, like [[22, 44], [44, 55], [11, 44], ...].

\n"},"smooth":{"type":["number","string"],"description":"

Whether smooth the line.

\n
    \n
  • If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of [0, 1].
    • \n
  • If the value is 'spline', Catmull-Rom spline interpolation is used.
    • \n
\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"

Whether prevent the smooth process cause the line out of the bounding box.

\n

Only works when smooth is number (bezier smooth).

\n","default":false},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":null},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":5},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_line":{"type":["Object"],"description":"

Line element.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"line"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"

x value of the start point.

\n","default":0},"y1":{"type":["number"],"description":"

y value of the start point.

\n","default":0},"x2":{"type":["number"],"description":"

x value of the end point.

\n","default":0},"y2":{"type":["number"],"description":"

y value of the end point.

\n","default":0},"percent":{"type":["number"],"description":"

Specify the percentage of drawing, useful in animation.

\n

Value range: [0, 1].

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":null},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":5},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}},"return_bezierCurve":{"type":["Object"],"description":"

Quadratic bezier curve or cubic bezier curve.

\n","properties":{"type":{"type":["string"],"description":"

Must be specified when define a graphic element at the first time.

\n

Optional values:

\n

image,\ntext,\ncircle,\nsector,\nring,\npolygon,\npolyline,\nrect,\nline,\nbezierCurve,\narc,\ngroup,

\n","default":"bezierCurve"},"id":{"type":["string"],"description":"

id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.

\n","default":"undefined"},"x":{"type":["number"],"description":"

x position of element. In pixels.

\n","default":0},"y":{"type":["number"],"description":"

y position of element. In pixels.

\n","default":0},"rotation":{"type":["number"],"description":"

Degree value of rotation.

\n","default":0},"scaleX":{"type":["number"],"description":"

Scale on x.

\n","default":1},"scaleY":{"type":["number"],"description":"

Scale on y.

\n","default":1},"originX":{"type":["number"],"description":"

x value of element scale and rotation origin. In pixels

\n","default":0},"originY":{"type":["number"],"description":"

y value of element scale and rotation origin. In pixels.

\n","default":0},"transition":{"type":["string","Array"],"description":"

You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.

\n

The properties can be:

\n

Transform related properties:'x', 'y', 'scaleX', 'scaleY', 'rotation', 'originX', 'originY'. For example:

\n
{\n    type: 'rect',\n    x: 100,\n    y: 200,\n    transition: ['x', 'y']\n}\n
\n

Shortcut to transition all of the properties in 'shape', 'style', 'extra'. For example:

\n
{\n    type: 'rect',\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n}\n
\n

In the custom series. 'x' and 'y' are transitioned by default. If you want to disable the default transition, just set it as: transition: [].

\n

See this example please.

\n","default":"['x', 'y']"},"enterFrom":{"type":["Object"],"description":"

Initial properties for enter animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n
\n"},"leaveTo":{"type":["Object"],"description":"

End properties for leave animation.

\n

Example:

\n
{\n    type: 'circle',\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n
\n"},"enterAnimation":{"type":["Object"],"description":"

Configurations of enter animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"updateAnimation":{"type":["Object"],"description":"

Configurations of update animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"leaveAnimation":{"type":["Object"],"description":"

Configurations of leave animation.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"}}},"keyframeAnimation":{"type":["Object","Array"],"description":"

Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.

\n

Example:

\n
keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: 'sinusoidalInOut',\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: 'sinusoidalInOut',\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n
\n

If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation, unit: ms

\n"},"easing":{"type":["string"],"description":"

Easing effect. Refer to the following for different effects: examples

\n"},"delay":{"type":["number"],"description":"

Delay of animation, unit: ms

\n"},"loop":{"type":["boolean"],"description":"

If loop the keyframe animation.

\n"},"keyframes":{"type":["Array"],"description":"

The keyframes of the animation. Each item in the array is a keyframe in the following format.

\n
interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n
\n"}}},"morph":{"type":["boolean"],"description":"

Whether to enable morphing animation.

\n

If you enabled universalTransition and then the update has different types of shape, for example from rect to circle, it will apply the morph animation. Set this property to false to turn it off.

\n","default":false},"z2":{"type":["number"],"description":"

Define the overlap relationship between graphic elements.

\n","default":"undefined"},"name":{"type":["string"],"description":"

See diffChildrenByName.

\n","default":"undefined"},"info":{"type":["*"],"description":"

User defined data, can be visited in event listeners.

\n
chart.on('click', function (params) {\n    console.log(params.info);\n});\n
\n"},"silent":{"type":["boolean"],"description":"

Whether response to mouse events / touch events.

\n","default":false},"invisible":{"type":["boolean"],"description":"

Whether the element is visible.

\n","default":false},"ignore":{"type":["boolean"],"description":"

Whether the element is totally ignored (neither render nor listen events).

\n","default":false},"textContent":{"type":["Object"],"description":"

Text block attached to an element and layout based on the element by textConfig.

\n

The props the the same as text.

\n"},"textConfig":{"type":["Object"],"description":"","properties":{"position":{"type":[""],"description":"

Position of textContent.

\n
    \n
  • 'left'
    • \n
  • 'right'
    • \n
  • 'top'
    • \n
  • 'bottom'
    • \n
  • 'inside'
    • \n
  • 'insideLeft'
    • \n
  • 'insideRight'
    • \n
  • 'insideTop'
    • \n
  • 'insideBottom'
    • \n
  • 'insideTopLeft'
    • \n
  • 'insideTopRight'
    • \n
  • 'insideBottomLeft'
    • \n
  • 'insideBottomRight'
    • \n
  • or like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
\n","default":"'inside'"},"rotation":{"type":["number"],"description":"

Rotation of textContent. In radian.

\n"},"layoutRect":{"type":["Object"],"description":"

Rect that textContent will be positioned.\nDefault to be the bounding box of host element.

\n
{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n
\n"},"offset":{"type":["Array"],"description":"

Offset of the textContent.

\n

The difference of offset and position is that offset will be applied in the rotation.

\n"},"origin":{"type":["*"],"description":"

origin is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf 'center' specified, it will be center of the bounding box.

\n

Only available when position and rotation are both set.

\n
    \n
  • like [12, 33]
    • \n
  • or like ['50%', '50%']
    • \n
  • 'center'
    • \n
\n"},"distance":{"type":["number"],"description":"

Distance to the layoutRect。

\n","default":5},"local":{"type":["boolean"],"description":"

If true, it will apply host's transform.

\n","default":false},"insideFill":{"type":["string"],"description":"

insideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.insideFill > "auto-calculated-fill"\nIn most cases, "auto-calculated-fill" is white.

\n"},"insideStroke":{"type":["string"],"description":"

insideStroke is a color string or left empty.

\n

If a textContent is "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.insideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be the same as fill of this element if possible, or null.
      • \n
    \n
    • \n
\n"},"outsideFill":{"type":["string"],"description":"

outsideFill is a color string or left empty.

\n

If a textContent is "inside", its final fill will be picked by this priority:\ntextContent.style.fill > textConfig.outsideFill > #000

\n"},"outsideStroke":{"type":["string"],"description":"

outsideStroke is a color string or left empty.

\n

If a textContent is not "inside", its final stroke will be picked by this priority:\ntextContent.style.stroke > textConfig.outsideStroke > "auto-calculated-stroke"

\n

The rule of getting "auto-calculated-stroke":

\n
    \n
  • If
      \n
    • (A) the fill is specified in style (either in textContent.style or textContent.style.rich)
      • \n
    • or (B) needed to draw text background (either defined in textContent.style or textContent.style.rich)
      • \n
    • "auto-calculated-stroke" will be null.
      • \n
    \n
    • \n
  • Otherwise
      \n
    • "auto-calculated-stroke" will be a near white color to distinguish "front end" label with messy background (like other text label, line or other graphic).
      • \n
    \n
    • \n
\n"},"inside":{"type":["boolean"],"description":"

Tell echarts that I can make sure this text is inside or not.

\n"}}},"during":{"type":["Function"],"description":"

during callback enable users to set props to an element in each animation frame.

\n
(duringAPI: CustomDuringAPI) => void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: 'rect', shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: 'rect', style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: 'rect', extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    'x' | 'y' | 'scaleX' | 'scaleY' | 'originX' | 'originY' | 'rotation';\n
\n

In most cases users do not need this during callback. For example, if some props are specified in transition, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this during callback to customize them.

\n

For example, if users are using polygon shape. The shape is described by shape.points, which is an points array like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n
\n

If users specify them into transition like:

\n
{\n    type: 'polygon',\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: 'shape'\n    // ...\n}\n
\n

Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the during callback like that:

\n
{\n    type: 'polygon',\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: 'points'\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: 'extra',\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra('degree');\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n
\n

See this example example.

\n"},"extra":{"type":["Object"],"description":"

Users can define their own props in this extra field. See during for the major usage of extra.

\n","properties":{"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this extra.

\n

For example:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: 'extra',\n};\n
\n","default":"undefined"}}},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"

x value of the start point.

\n","default":0},"y1":{"type":["number"],"description":"

y value of the start point.

\n","default":0},"x2":{"type":["number"],"description":"

x value of the end point.

\n","default":0},"y2":{"type":["number"],"description":"

y value of the end point.

\n","default":0},"cpx1":{"type":["number"],"description":"

x of control point.

\n","default":0},"cpy1":{"type":["number"],"description":"

y of control point.

\n","default":0},"cpx2":{"type":["number"],"description":"

x of the second control point. If specified, cubic bezier is used.

\n

If both cpx2 and cpy2 are not set, quatratic bezier is used.

\n","default":null},"cpy2":{"type":["number"],"description":"

y of the second control point. If specified, cubic bezier is used.

\n

If both cpx2 and cpy2 are not set, quatratic bezier is used.

\n","default":null},"percent":{"type":["number"],"description":"

Specify the percentage of drawing, useful in animation.

\n

Value range: [0, 1].

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this shape.

\n

For example:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: 'shape',\n};\n
\n","default":"undefined"}}},"style":{"type":["Object"],"description":"

More attributes in style (for example, rich text), see the style related attributes in zrender/graphic/Displayable.

\n

Notice, the attribute names of the style of graphic elements is derived from zrender, which may be different from the attribute names in echarts label, echarts itemStyle, etc., although they have the same meaning. For example:

\n\n","properties":{"fill":{"type":["string"],"description":"

Color filled in this element.

\n","default":"'#000'"},"stroke":{"type":["string"],"description":"

Color of stroke.

\n","default":null},"lineWidth":{"type":["number"],"description":"

Width of stroke.

\n","default":0},"lineDash":{"type":["string","number","Array"],"description":"

Sets the line dash pattern used when stroking lines. Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
  • number / number array. See MDN for more information.
    • \n
\n","default":"'solid'"},"lineDashOffset":{"type":["number"],"description":"

Sets the line dash offset used when stroking lines. See MDN for more information.

\n","default":0},"lineCap":{"type":["string"],"description":"

Line cap style. See MDN for more information.

\n","default":"'butt'"},"lineJoin":{"type":["string"],"description":"

Line join style. See MDN for more information.

\n","default":"'miter'"},"miterLimit":{"type":["number"],"description":"

Sets the miter limit ratio. See MDN for more information.

\n","default":10},"shadowBlur":{"type":["number"],"description":"

Width of shadow.

\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"

X offset of shadow.

\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"

Y offset of shadow.

\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"

Color of shadow.

\n","default":"undefined"},"opacity":{"type":["number"],"description":"

Opacity of this element.

\n","default":1},"transition":{"type":["string","Array"],"description":"

Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this style.

\n

For example:

\n
{\n    type: 'rect',\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: ['mmm', 'ppp']\n    }\n}\n
\n

We can also specify all of the properties like this:

\n
{\n    type: 'rect',\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: 'style',\n};\n
\n","default":"undefined"}}},"focus":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

When it's highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:

\n
    \n
  • 'none' Do not fade out other data, it's by default.
    • \n
  • 'self' Only focus (not fade out) the element of the currently highlighted data.
    • \n
  • 'series' Focus on all elements of the series which the currently highlighted data belongs to.
    • \n
\n","default":"'none'"},"blurScope":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n

The range of fade out when focus is enabled. Support the following configurations

\n
    \n
  • 'coordinateSystem'
    • \n
  • 'series'
    • \n
  • 'global'
    • \n
\n","default":"'coordinateSystem'"},"emphasisDisabled":{"type":["boolean"],"description":"

Whether to disable the emphasis state.

\n"},"emphasis":{"type":["Object"],"description":"

Emphasis state of the element.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"blur":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Blur state, available when focus is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}},"select":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Select state, available when selectedMode is set.

\n","properties":{"style":{"type":["Object"],"description":"

Same to style.

\n"}}}}}}},"itemStyle":{"type":["Object"],"description":"

Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

color. Color is taken from option.color Palette by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"labelLine":{"type":["Object"],"description":"
\n

Since v5.0.0

\n
\n

Configuration of label guide line.

\n","properties":{"show":{"type":["boolean"],"description":"\n\n

Whether to show the label guide line.

\n","uiControl":{"type":"boolean"}},"showAbove":{"type":["boolean"],"description":"
\n

Since v5.0.0

\n
\n

Whether to show the label guide line above the corresponding element.

\n"},"length2":{"type":["number"],"description":"\n\n

The length of the second segment of guide line.

\n","uiControl":{"type":"number","default":"15","min":"0","step":"1"}},"smooth":{"type":["boolean","number"],"description":"\n\n

Whether to smooth the guide line. It defaults to be false and can be set as true or the values from 0 to 1 which indicating the smoothness.

\n","uiControl":{"type":"boolean"},"default":false},"minTurnAngle":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n

Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.

\n

Can be 0 - 180 degree.

\n","default":null},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

Line color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":"\"#000\""},"width":{"type":["number"],"description":"\n\n

line width.

\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"},"default":0},"type":{"type":["string","number","Array"],"description":"\n\n\n

line type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ndashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"dashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntype\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"cap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"join":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nmiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"miterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \njoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"labelLayout":{"type":["Object","Function"],"description":"
\n

Since v5.0.0

\n
\n

Unified layout configuration of labels.

\n

It provide a chance to adjust the labels' (x, y) position, alignment based on the original layout each series provides.

\n

This option can be a callback with following parameters.

\n
// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be 'node' or 'edge'\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: 'left' | 'center' | 'right'\n// Vertical alignment of label.\nverticalAlign: 'top' | 'middle' | 'bottom'\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It's null in other series.\nlabelLinePoints?: number[][]\n
\n

Example:

\n

Align the labels on the right. Left 10px margin to the edge.

\n
labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: 'middle',\n        align: 'left'\n    }\n}\n
\n

Set the text size based on the size of element bounding rectangle.

\n
\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n
\n","properties":{"hideOverlap":{"type":["boolean"],"description":"

If hide the overlapped labels.

\n

The following example shows how to hide the overlapped labels in graph automatically when zooming.

\n\n\n"},"moveOverlap":{"type":["string"],"description":"

If move the overlapped labels to avoid overlapping.

\n

Currently supported configurations:

\n
    \n
  • 'shiftX' Place the labels on horizontal direction sequencely, used when aligned horizontally.
    • \n
  • 'shiftY' Place the labels on vertical direction sequencely, used when aligned vertically.
    • \n
\n

The following example shows how to use moverOverlap: 'shiftY' to place the labels aligned vertically.

\n\n\n"},"x":{"type":["number","string"],"description":"

The x position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"y":{"type":["number","string"],"description":"

The y position of the label. Support absolute pixel values ​​or relative values ​​such as '20%'.

\n"},"dx":{"type":["number"],"description":"

The pixel offset of the label in the x direction. Can be used with x.

\n"},"dy":{"type":["number"],"description":"

The pixel offset of the label in the y direction. Can be used with y

\n"},"rotate":{"type":["number"],"description":"

Label rotation angle.

\n"},"width":{"type":["number"],"description":"

The width of displayed label. It can be used with overflow to constraint the label in a fixed width.

\n"},"height":{"type":["number"],"description":"

The height of displayed label.

\n"},"align":{"type":["string"],"description":"

The horizontal alignment of the label. Can be 'left', 'center', 'right'.

\n"},"verticalAlign":{"type":["string"],"description":"

The vertical alignment of the label. Can be 'top', 'middle', 'bottom'.

\n"},"fontSize":{"type":["number"],"description":"

The text size of the label.

\n"},"draggable":{"type":["boolean"],"description":"

Whether to allow the user to adjust the position by dragging.

\n"},"labelLinePoints":{"type":["Array"],"description":"

The array of the three points of the label guide line. The format is:

\n
[[x, y], [x, y], [x, y]]\n
\n

It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.

\n"}}},"selectedMode":{"type":["boolean","string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

Selected mode. It is disabled by default, and you may set it to be true to enable it.

\n

Besides, it can be set to 'single', 'multiple' or 'series', for single selection, multiple selections and whole series selection.

\n
\n

'series' is supported since v5.3.0

\n
\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"},"default":false},"dimensions":{"type":["Array"],"description":"

dimensions can be used to define dimension info for series.data or dataset.source.

\n

Notice: if dataset is used, we can definite dimensions in dataset.dimensions, or provide dimension names in the first column/row of dataset.source, and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

\n

For example:

\n
option = {\n    dataset: {\n        source: [\n            // 'date', 'open', 'close', 'highest', 'lowest'\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        // Specify name for each dimensions, which will be displayed in tooltip.\n        dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n    }\n}\n
\n
series: {\n    type: 'xxx',\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: 'ordinal'},   // Specify type of this dimension.\n                             // 'ordinal' is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: 'good', type: 'number'},\n        'bad'                // Equals to {name: 'bad'}.\n    ]\n}\n
\n

Each data item of dimensions can be:

\n
    \n
  • string, for example, 'someName', which equals to {name: 'someName'}.
    • \n
  • Object, where the attributes can be:
      \n
    • name: string.
      • \n
    • type: string, supports:
        \n
      • number
        • \n
      • float, that is, Float64Array
        • \n
      • int, that is, Int32Array
        • \n
      • ordinal, discrete value, which represents string generally.
        • \n
      • time, time value, see data to check the format of time value.
        • \n
      \n
      • \n
    • displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.
      • \n
    \n
    • \n
\n

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

\n"},"encode":{"type":["Object"],"description":"

Define what is encoded to for each dimension of data. For example:

\n
option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: 'xxx',\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n
\n

When dimensions is used to defined name for a certain dimension, encode can refer the name directly. For example:

\n
series: {\n    type: 'xxx',\n    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n    encode: {\n        x: 'date',\n        y: ['open', 'close', 'highest', 'lowest']\n    }\n}\n
\n

The basic structure of encode is illustrated as follows, where the left part of colon is the name of axis like 'x', 'y', 'radius', 'angle' or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

\n

The properties available in encode listed as follows:

\n
// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension "product" and "score" in the tooltip.\n    tooltip: ['product', 'score']\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // 'pie', 'funnel', where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the group ID for each data item. With universalTransition enabled,\n    // the data items from the old option and those from the new one, if sharing a same group ID,\n    // will then be matched and applied to a proper animation after `setOption` is called.\n    itemGroupId: 4,\n    // Using dimension[5] as the child group ID for each data item. This option is introduced to\n    // make multiple levels drilldown and aggregation animation come true. See childGroupId for more.\n    // Since v5.5.0\n    itemChildGroupId: 5\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n    x: [1, 5, 'score'],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n    value: 3\n}\n
\n

This is an example for encode.

\n

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the dataZoom on the axis will not filter the series.

\n
var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: 'custom',\n        renderItem: function (params, api) {\n            return {\n                type: 'circle',\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: 'blue'\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n
\n"},"seriesLayoutBy":{"type":["string"],"description":"

When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:

\n
    \n
  • 'column': by default, the columns of dataset are mapped the series. In this case, each column represents a dimension.
    • \n
  • 'row'：the rows of dataset are mapped to the series. In this case, each row represents a dimension.
    • \n
\n

Check this example.

\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"

If series.data is not specified, and dataset exists, the series will use dataset. datasetIndex specifies which dataset will be used.

\n","default":0},"dataGroupId":{"type":["string"],"description":"

A group ID assigned to all data items in the series.

\n

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

\n"},"data":{"type":["Array"],"description":"

Data array of series, which can be in the following forms:

\n

Notice, if no data specified in series, and there is dataset in option, series will use the first dataset as its datasource. If data has been specified, dataset will not used.

\n

series.datasetIndex can be used to specify other dataset.

\n

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a "dimension".

\n
series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n
\n\n

Especially, when there is one and only one category axis (axis.type is 'category'), data can be simply be represented by a one-dimension array, like:

\n
xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n
\n


\nRelationship between "value" and axis.type

\n
    \n

  • When a dimension corresponds to a value axis (axis.type is 'value' or 'log'):

    \n

    The value can be a number (like 12) (can also be a number in a string format, like '12').

    \n
    • \n

  • When a dimension corresponds to a category axis (axis.type is 'category'):

    \n

    The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

    \n
      xAxis: {\n      type: 'category',\n      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n  },\n  yAxis: {\n      type: 'category',\n      data: ['a', 'b', 'm', 'n', 'p', 'q']\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n          [  'Thursday',  2,    1  ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n          [  2,          'p',   2  ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n          [  3,           3,    5  ]\n      ]\n  }]\n
    \n

    There is an example of double category axes: Github Punchcard.

    \n
    • \n

  • When a dimension corresponds to a time axis (type is 'time'), the value can be:

    \n
      \n
    • a timestamp, like 1484141700832, which represents a UTC time.
      • \n
    • a date string, in one of the formats below:
        \n
      • a subset of ISO 8601, only including (all of these are treated as local time unless timezone is specified, which is consistent with moment):
          \n
        • only part of year/month/date/time are specified: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
          • \n
        • separated by "T" or a space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
          • \n
        • timezone specified: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
          • \n
        \n
        • \n
      • other date string format (all of these are treated as local time):\n'2012', '2012-3-1', '2012/3/1', '2012/03/01',\n'2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'.
        • \n
      \n
      • \n
    • a JavaScript Date instance created by user:
        \n
      • Caution, when using a data string to create a Date instance, browser differences and inconsistencies should be considered.
        • \n
      • For example: In chrome, new Date('2012-01-01') is treated as a Jan 1st 2012 in UTC, while new Date('2012-1-1') and new Date('2012/01/01') are treated as Jan 1st 2012 in local timezone. In safari new Date('2012-1-1') is not supported.
        • \n
      • So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., moment), or use echarts.time.parse, or check this.
        • \n
      \n
      • \n
    \n
    • \n
\n


\nCustomize a data item:

\n

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

\n
[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n
\n


\nEmpty value:

\n

'-' or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

\n

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

\n



\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"

Name of data item.

\n"},"value":{"type":["number"],"description":"

Value of data item.

\n"},"groupId":{"type":["string"],"description":"

The group ID of a data item. When universalTransition is enabled, the data items from the old option and those from the new one, if sharing a same group ID, will then be matched and applied to a proper animation after setOption is called.

\n

If a data item is not specified with a groupId, Apache ECharts will try to use series.dataGroupId as the group ID for the data item. If series.dataGroupId is not specified either, Apache ECharts will fall back to using the data item's ID as its group ID.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemGroupId to specify the dimension that is to be encoded as the group ID.

\n"},"childGroupId":{"type":["string"],"description":"
\n

Since v5.5.0

\n
\n

The group ID of the child data of a data item. This option is introduced to make multiple levels drilldown and aggregation animation possilbe.

\n\n\n\n

Before childGroupId is introduced, developers actually can use groupId to make drilldown and aggregation animation already, but with the limit on the times that a continious drilldown or aggregation can happen, which is only one time.

\n

childGroupId, together with groupId, help to form "parent-child" relationships between data items of different options, such as:

\n
data: [                        data: [                        data: [\n  {                              {                              {\n    name: 'Animals',               name: 'Dogs',                  name: 'Corgi',\n    value: 3,                      value: 3,                      value: 5,\n    groupId: 'things',             groupId: 'animals',            groupId: 'dogs'\n    childGroupId: 'animals'        childGroupId: 'dogs'         },\n  },                             },                             {\n  {                              {                                name: 'Bulldog',\n    name: 'Fruits',                name: 'Cats',                  value: 6,\n    value: 3,                      value: 4,                      groupId: 'dogs'\n    groupId: 'things',             groupId: 'animals',          },\n    childGroupId: 'fruits'         childGroupId: 'cats',        {\n  },                             },                               name: 'Shiba Inu',\n  {                              {                                value: 7,\n    name: 'Cars',                  name: 'Birds',                 groupId: 'dogs'\n    value: 2,                      value: 3,                    }\n    groupId: 'things',             groupId: 'animals',        ]\n    childGroupId: 'cars'           childGroupId: 'birds'\n  }                              }\n]                              ]\n
\n

The 3 groups of data above come from 3 options, and by specifying groupId and childGroupId for the data items a relationship of "parent-child-grandChild" is formed in the 3 options. In this way, after setOption is called, Apache ECharts will try to find the "parent-child" or "child-parent" relationship of the old option and the new one. If the relationship exists, the matching data items will be applied to a drilldown animation or an aggregation one.

\n

If a data item has no child data then there is no need to specify a childGroupId at all.

\n

If you are using the dataset component to represent data, you are recommended to use encode.itemChildGroupId to specify the dimension that is to be encoded as the child group ID.

\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}},"decal":{"type":["Object"],"description":"

The style of the decal pattern. It works only if aria.enabled and aria.decal.show are both set to be true.

\n

If it is set to be 'none', no decal will be used.

\n","properties":{"symbol":{"type":["string","Array"],"description":"

The symbol type of the decal. If it is in the type of string[], it means the symbols are used one by one.

\n

Icon types provided by ECharts includes

\n

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

\n

It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.

\n

An image URL example:

\n
'image://http://example.website/a/b.png'\n

A dataURI example:

\n
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n

Icons can be set to arbitrary vector path via 'path://' in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to SVG PathData for more information about the format of the path. You may export vector paths from tools like Adobe

\n

For example:

\n
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n
","default":"'rect'"},"symbolSize":{"type":["number"],"description":"

Range of values: 0 to 1, representing the size of symbol relative to decal.

\n","default":1},"symbolKeepAspect":{"type":["boolean"],"description":"

Whether or not to keep the aspect ratio of the pattern.

\n","default":true},"color":{"type":["string"],"description":"

For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.

\n","default":"'rgba(0, 0, 0, 0.2)'"},"backgroundColor":{"type":["string"],"description":"

The background color of the decal will be over the color of the series itself, under the decal pattern.

\n","default":null},"dashArrayX":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayX controls the horizontal pattern pattern. When its value is of type number or number[], it is similar to SVG stroke-dasharray.

\n
    \n

  • If it is of type number, it means that the pattern and the blank space are of this value respectively. For example, 5 means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of an array of values. For example: [5, 10, 2, 6] means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...

    \n
    • \n

  • If of type (number | number[])[], it means that each row is a loop with an array of values for the pattern and blank space. For example: [10, [2, 5]] means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"dashArrayY":{"type":["number","Array"],"description":"

The basic pattern of the decal pattern is an infinite loop in the form of Pattern - Blank - Pattern - Blank - Pattern - Blank both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.

\n

dashArrayY controls the horizontal pattern pattern. Similar to SVG stroke-dasharray.

\n
    \n

  • If it is a number type, it means the pattern and the blank are each of this value. For example, 5 means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...

    \n
    • \n

  • In the case of number[] type, it means that the pattern and empty space are loops of sequential array values. For example: [5, 10, 2, 6] means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...

    \n
    • \n
\n

This interface can be better understood with the following examples.

\n\n\n","default":5},"rotation":{"type":["number"],"description":"

The overall rotation angle (in radians) of the pattern, in the range from `-Math.

\n","default":0},"maxTileWidth":{"type":["number"],"description":"

The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.

\n","default":512},"maxTileHeight":{"type":["number"],"description":"

The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.

\n","default":512}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"\n\n

color.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","uiControl":{"type":"color"},"default":null},"borderColor":{"type":["Color"],"description":"\n\n

border color, whose format is similar to that of color.

\n","uiControl":{"type":"color"},"default":"'#000'"},"borderWidth":{"type":["number"],"description":"\n\n

border width. No border when it is set to be 0.

\n

border width. No border when it is set to be 0.

\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"},"default":0},"borderType":{"type":["string","number","Array"],"description":"\n\n\n

border type.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \nborderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"borderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \nborderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"borderCap":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To specify how to draw the end points of the line.\nPossible values are:

\n
    \n
  • 'butt': The ends of lines are squared off at the endpoints.
    • \n
  • 'round': The ends of lines are rounded.
    • \n
  • 'square': The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    • \n
\n

Default value is 'butt'. Refer to MDN lineCap for more details.

\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"},"default":"'butt'"},"borderJoin":{"type":["string"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To determine the shape used to join two line segments where they meet.

\n

Possible values are:

\n
    \n
  • 'bevel': Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    • \n
  • 'round': Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    • \n
  • 'miter': Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \nborderMiterLimit\nproperty.
    • \n
\n

Default value is 'bevel'. Refer to MDN lineJoin for more details.

\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"},"default":"'bevel'"},"borderMiterLimit":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the miter limit ratio. Only works when \nborderJoin\n is set as miter.

\n

Default value is 10. Negative、0、Infinity and NaN values are ignored.

\n

Refer to MDN miterLimit for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"},"default":10},"shadowBlur":{"type":["number"],"description":"\n\n

Size of shadow blur. This attribute should be used along with shadowColor,shadowOffsetX, shadowOffsetY to set shadow to component.

\n

For example:

\n
{\n    shadowColor: 'rgba(0, 0, 0, 0.5)',\n    shadowBlur: 10\n}\n
\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"type":["Color"],"description":"\n\n

Shadow color. Support same format as color.

\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"type":["number"],"description":"\n\n

Offset distance on the horizontal direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"shadowOffsetY":{"type":["number"],"description":"\n\n

Offset distance on the vertical direction of shadow.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"opacity":{"type":["number"],"description":"\n\n

Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.

\n","uiControl":{"type":"number","default":"1","min":"0","max":"1","step":"0.01"}}}}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series data.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.data.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}},"clip":{"type":["boolean"],"description":"\n\n\n\n
\n

Since v4.4.0

\n
\n

If clip the overflow on the coordinate system. Clip results varies between series:

\n
    \n
  • Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
    • \n
  • Bar：Clip all the overflowed. With bar width kept.
    • \n
  • Line：Clip the overflowed line.
    • \n
  • Lines: Clip all the overflowed.
    • \n
  • Candlestick: Ignore the elements exceeds the coordinate system.
    • \n
  • PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
    • \n
  • Custom: Clip all the olverflowed.
    • \n
\n

All these series have default value true except pictorialBar and custom series. Set it to false if you don't want to clip.

\n","uiControl":{"type":"boolean","default":"false"},"default":false},"zlevel":{"type":["number"],"description":"

zlevel value of all graphical elements in custom series.

\n

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

\n

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

\n","default":0},"z":{"type":["number"],"description":"

z value of all graphical elements in custom series, which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

\n

z has a lower priority to zlevel, and will not create new Canvas.

\n","default":2},"silent":{"type":["boolean"],"description":"\n\n\n\n

Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

\n","uiControl":{"type":"boolean"},"default":false},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'"},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0},"universalTransition":{"type":["object"],"description":"
\n

Since v5.2.0

\n
\n

Configuration related to universal transition animation.

\n

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

\n

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items' groupId and childGroupId.

\n

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

\n","properties":{"enabled":{"type":["boolean"],"description":"

Whether to enable the universal transition animation.

\n","default":false},"seriesKey":{"type":["string","Array"],"description":"

The seriesKey determines how the series to be animated is associated, it defaults to the id of the series when not configured.

\n

Usually this is configured as a string, and transitions between series with the same seriesKey will be applied. It can also be configured as an array like the following.

\n
seriesKey: ['male', 'female']\n
\n

Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with id or seriesKey of 'male' and 'female' will be merged into the current series.

\n"},"divideShape":{"type":["string"],"description":"

divideShape determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports

\n
    \n
  • 'split' Split the shape into multiple shapes.
    • \n
  • 'clone' Get multiple clones from the current element.
    • \n
\n

For better results, different series will have different configurations by default, for example, scatter with smaller and more complex element uses 'clone' by default, while more regular ones like bar charts default to 'split'. You can set this to the desired splitting strategy according to the needs of your own scenario.

\n"},"delay":{"type":["Function"],"description":"
(index: number, count: number) => number\n
\n

Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.

\n
delay: function (index, count) {\n    return Math.random() * 1000;\n}\n
\n"}}},"tooltip":{"type":["Object"],"description":"

tooltip settings in this series.

\n","properties":{"position":{"type":["string","Array"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The position of the tooltip's floating layer, which would follow the position of mouse by default.

\n

Options:

\n
    \n

  • Array

    \n

    Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.

    \n

    Example:

    \n
      // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: ['50%', '50%']\n
    \n
    • \n

  • Function

    \n

    Callback function in the following form:

    \n
      (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n
    \n

    Parameters:
    \n point: Mouse position.
    \n param: The same as formatter.
    \n dom: The DOM object of tooltip.
    \n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with x, y, width, and height.
    \n size: The size of dom echarts container. For example: {contentSize: [width, height], viewSize: [width, height]}.

    \n

    Return:
    \n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.
    \n Or can be an object, like {left: 10, top: 30}, or {right: '20%', bottom: 40}.

    \n

    For example:

    \n
      position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], '10%'];\n  }\n
    \n

    Or:

    \n
      position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n
    \n
    • \n

  • 'inside'

    \n

    Center position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'top'

    \n

    Top position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'left'

    \n

    Left position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'right'

    \n

    Right position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n

  • 'bottom'

    \n

    Bottom position of the graphic element where the mouse is in, which is only valid when trigger is 'item'.

    \n
    • \n
\n"},"formatter":{"type":["string","Function"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The content formatter of tooltip's floating layer which supports string template and callback function.

\n

1. String template

\n

The template variables are {a}, {b}, {c}, {d} and {e}, which stands for series name, data name and data value and ect. When trigger is set to be 'axis', there may be data from multiple series. In this time, series index can be referred as {a0}, {a1}, or {a2}.

\n

{a}, {b}, {c}, {d} have different meanings for different series types:

\n
    \n

  • Line (area) charts, bar (column) charts, K charts: {a} for series name, {b} for category name, {c} for data value, {d} for none;

    \n
    • \n

  • Scatter (bubble) charts: {a} for series name, {b} for data name, {c} for data value, {d} for none;

    \n
    • \n

  • Map: {a} for series name, {b} for area name, {c} for merging data, {d} for none;

    \n
    • \n

  • Pie charts, gauge charts, funnel charts: {a} for series name, {b} for data item name, {c} for data value, {d} for percentage.

    \n
    • \n
\n

Example:

\n
formatter: '{b0}: {c0}<br />{b1}: {c1}'\n
\n

2. Callback function

\n

The format of callback function:

\n
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]\n
\n

The first parameter params is the data that the formatter needs. Its format is shown as follows:

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array,\n    // A function that returns a boolean value to flag if the axis label is truncated\n    isTruncated: Function,\n    // Current index of the axis label tick\n    tickIndex: number\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

When trigger is 'axis', or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above. Besides,

\n
{\n    componentType: 'series',\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like ('x' 'y' 'radius' 'angle')\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array<String>,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n
\n

How to use encode and dimensionNames?

\n

When the dataset is like

\n
dataset: {\n    source: [\n        ['Matcha Latte', 43.3, 85.8, 93.7],\n        ['Milk Tea', 83.1, 73.4, 55.1],\n        ['Cheese Cocoa', 86.4, 65.2, 82.5],\n        ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.encode.y[0]]\n
\n

When the dataset is like

\n
dataset: {\n    dimensions: ['product', '2015', '2016', '2017'],\n    source: [\n        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n    ]\n}\n
\n

We can get the value of the y-axis via

\n
params.value[params.dimensionNames[params.encode.y[0]]]\n
\n

Note: Using array to present all the parameters in ECharts 2.x is not supported anymore.

\n

The second parameter ticket is the asynchronous callback flag which should be used along with the third parameter callback when it is used.

\n

The third parameter callback is asynchronous callback. When the content of tooltip is acquired asynchronously, ticket and htm as introduced above can be used to update tooltip with callback.

\n

Example:

\n
formatter: function (params, ticket, callback) {\n    $.get('detail?name=' + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return 'Loading';\n}\n
\n"},"valueFormatter":{"type":["string"],"description":"
\n

Since v5.3.0

\n
\n

Callback function for formatting the value section in tooltip.

\n

Interface:

\n
(value: number | string, dataIndex: number) => string\n
\n
\n

dataIndex is provided since v5.5.0.

\n
\n

Example:

\n
// Add $ prefix\nvalueFormatter: (value) => '$' + value.toFixed(2)\n
\n"},"backgroundColor":{"type":["Color"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The background color of tooltip's floating layer.

\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border color of tooltip's floating layer.

\n","uiControl":{"type":"color","default":"#333"},"default":"'#333'"},"borderWidth":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The border width of tooltip's floating layer.

\n","uiControl":{"type":"number","default":"0","step":"0.5"},"default":0},"padding":{"type":["number"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n\n\n

The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.

\n

Examples:

\n
// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings separately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n
\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"},"default":5},"textStyle":{"type":["Object"],"description":"
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

The text style of tooltip's floating layer.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"'#fff'"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"},"default":14},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"extraCssText":{"type":["string"],"description":"\n\n\n\n\n
\n

Notice：series.tooltip only works when tooltip.trigger is 'item'.

\n
\n

Extra CSS style for floating layer. The following is an example for adding shadow.

\n
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n
\n","uiControl":{"type":"text"}}}}}}]},"properties":{}},"darkMode":{"type":["boolean"],"description":"

To specify whether it's dark mode.

\n

ECharts will automatically detect it via backgroundColor by default and adjust the text color accordingly.

\n

This option is usually used in themes.

\n","properties":{}},"color":{"type":["Array"],"description":"

The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.

\n

Defaults:

\n
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']\n
\n

Supported color formats.

\n
    \n

  • Use RGB for colors, like 'rgb(128, 128, 128)', or RGBA if you want to add an alpha channel for opacity, like 'rgba(128, 128, 128, 0.5), or use hex string, like '#ccc'.

    \n
    • \n

  • Gradient Color or Pattern

    \n
    // Linear gradient with first four parameters x0, y0, x2, y2, ranging from 0 - 1, corresponding to the percentage in the graphical wraparound box, if globalCoord is ``true``, then the four values are absolute pixel positions\n{\n  type: 'linear',\n  x: 0,\n  y: 0,\n  x2: 0,\n  y2: 1,\n  colorStops: [{\n      offset: 0, color: 'red' // color at 0%\n  }, {\n      offset: 1, color: 'blue' // color at 100%\n  }],\n  global: false // default is false\n}\n// Radial gradient, the first three parameters are the center x, y and radius, the values are the same as the linear gradient\n{\n  type: 'radial',\n  x: 0.5,\n  y: 0.5,\n  r: 0.5,\n  colorStops: [{\n      offset: 0, color: 'red' // color at 0%\n  }, {\n      offset: 1, color: 'blue' // color at 100%\n  }],\n  global: false // default is false\n}\n// Pattern\n{\n  image: imageDom, // supported as HTMLImageElement, HTMLCanvasElement, but not path string of SVG\n  repeat: 'repeat' // whether to tile, can be 'repeat-x', 'repeat-y', 'no-repeat'\n}\n
    \n
    • \n
\n","properties":{}},"backgroundColor":{"type":["Color"],"description":"

Background color. No background by default.

\n
\n

Supports setting as solid color using rgb(255,255,255), rgba(255,255,255,1), #fff, etc. Also supports setting as gradient color and pattern fill, see option.color for details

\n
\n","properties":{}},"textStyle":{"type":["Object"],"description":"

Global font style.

\n","properties":{"color":{"type":["Color"],"description":"\n\n

text color.

\n","uiControl":{"type":"color","default":"null"},"default":"'#fff'"},"fontStyle":{"type":["string"],"description":"\n\n

font style.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'italic'
    • \n
  • 'oblique'
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"},"default":"'normal'"},"fontWeight":{"type":["string","number"],"description":"\n\n

font thick weight.

\n

Options are:

\n
    \n
  • 'normal'
    • \n
  • 'bold'
    • \n
  • 'bolder'
    • \n
  • 'lighter'
    • \n
  • 100 | 200 | 300 | 400...
    • \n
\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"},"default":"'normal'"},"fontFamily":{"type":["string"],"description":"\n\n

font family.

\n

Can also be 'serif' , 'monospace', ...

\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"},"default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"\n\n

font size.

\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"},"default":12},"lineHeight":{"type":["number"],"description":"\n\n

Line height of the text fragment.

\n

If lineHeight is not set in rich, lineHeight in parent level will be used. For example:

\n
{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n
\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"width":{"type":["number"],"description":"\n\n

Width of text block.

\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"height":{"type":["number"],"description":"\n\n

Height of text block.

\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textBorderColor":{"type":["Color"],"description":"\n\n

Stroke color of the text.

\n","uiControl":{"type":"color"}},"textBorderWidth":{"type":["number"],"description":"\n\n

Stroke line width of the text.

\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textBorderType":{"type":["string","number","Array"],"description":"\n\n\n

Stroke line type of the text.

\n

Possible values are:

\n
    \n
  • 'solid'
    • \n
  • 'dashed'
    • \n
  • 'dotted'
    • \n
\n

Since v5.0.0, it can also be a number or a number array to specify the dash array of the line. With \ntextBorderDashOffset\n, we can make the line style more flexible.

\n

For example：

\n
{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n
\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"},"default":"'solid'"},"textBorderDashOffset":{"type":["number"],"description":"
\n

Since v5.0.0

\n
\n\n\n

To set the line dash offset. With \ntextBorderType\n, we can make the line style more flexible.

\n

Refer to MDN lineDashOffset for more details.

\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"},"default":0},"textShadowColor":{"type":["Color"],"description":"\n\n

Shadow color of the text itself.

\n","uiControl":{"type":"color","default":"#000"},"default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"\n\n

Shadow blue of the text itself.

\n","uiControl":{"type":"number","min":"0","step":"0.5"},"default":0},"textShadowOffsetX":{"type":["number"],"description":"\n\n

Shadow X offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"textShadowOffsetY":{"type":["number"],"description":"\n\n

Shadow Y offset of the text itself.

\n","uiControl":{"type":"number","step":"0.5"},"default":0},"overflow":{"type":["string"],"description":"\n\n

Determine how to display the text when it's overflow. Available when width is set.

\n
    \n
  • 'truncate' Truncate the text and trailing with ellipsis.
    • \n
  • 'break' Break by word
    • \n
  • 'breakAll' Break by character.
    • \n
\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"},"default":"'none'"},"ellipsis":{"type":["string"],"description":"

Ellipsis to be displayed when overflow is set to truncate.

\n
    \n
  • 'truncate' Truncate the overflow lines.
    • \n
\n","default":"'...'"}}},"animation":{"type":["boolean"],"description":"\n\n

Whether to enable animation.

\n","uiControl":{"type":"boolean","default":"true","clean":"true"},"default":true,"properties":{}},"animationThreshold":{"type":["number"],"description":"

Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

\n","default":2000,"properties":{}},"animationDuration":{"type":["number","Function"],"description":"\n\n

Duration of the first animation, which supports callback function for different data to have different animation effect:

\n
animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"},"default":1000,"properties":{}},"animationEasing":{"type":["string"],"description":"\n\n

Easing method used for the first animation. Varied easing effects can be found at easing effect example.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"},"default":"'cubicOut'","properties":{}},"animationDelay":{"type":["number","Function"],"description":"

Delay before updating the first animation, which supports callback function for different data to have different animation effect.

\n

For example:

\n
animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0,"properties":{}},"animationDurationUpdate":{"type":["number","Function"],"description":"\n\n

Time for animation to complete, which supports callback function for different data to have different animation effect:

\n
animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"},"default":300,"properties":{}},"animationEasingUpdate":{"type":["string"],"description":"\n\n

Easing method used for animation.

\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"},"default":"'cubicOut'","properties":{}},"animationDelayUpdate":{"type":["number","Function"],"description":"

Delay before updating animation, which supports callback function for different data to have different animation effects.

\n

For example:

\n
animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n
\n

See this example for more information.

\n","default":0,"properties":{}},"stateAnimation":{"type":["Object"],"description":"

Animation configurations of state switchment. Can be configured in each series individually.

\n","properties":{"duration":{"type":["number"],"description":"

Duration of animation. Animation will be disabled when set to 0.

\n","default":300},"easing":{"type":["string"],"description":"

Easing of animation.

\n","default":"cubicOut"}}},"blendMode":{"type":["string"],"description":"

Sets the type of compositing operation to apply when drawing a new shape. See the different type: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation.

\n

The default is 'source-over'. Support settings for each series.

\n

'lighter' is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example Global airline

\n","default":"'source-over'","properties":{}},"hoverLayerThreshold":{"type":["number"],"description":"

When the number of element of the whole chart is larger than hoverLayerThreshold, a separate hover layer is used to render hovered elements.

\n

The separate hover layer is used to avoid re-painting the whole canvas when hovering on elements. Instead, the hovered elements are rendered in a separate layer so that other elements don't have to be rendered again.

\n

ECharts 2 use separate layer for all cases. But it brings some problems like the hovered elements may not covering everything else correctly, or translucent elements may not overlay correctly to each other. And it brings extra member cost due to the extra canvas and may bring burden on mobile devices. So since ECharts 3, the hover layer is not used by default. Only when the element amount is large enough will the hover layer used.

\n","default":3000,"properties":{}},"useUTC":{"type":["boolean"],"description":"

Whether to use UTC in display.

\n
    \n
  • true: When axis.type is 'time', ticks is determined according to UTC, and axisLabel and tooltip use UTC by default.
    • \n
  • false: When axis.type is 'time', ticks is determined according to local time, and axisLabel and tooltip use local time by default.
    • \n
\n

The default value of useUTC is false, for sake of considering:

\n
    \n
  • In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).
    • \n
  • If user uses time string (like '2012-01-02') in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.
    • \n
\n

Notice: the setting only affects "display time", not "parse time".\nFor how time value (like 1491339540396, '2013-01-04', ...) is parsed in echarts, see the time part in date.

\n","default":false,"properties":{}},"options":{"type":["Array"],"description":"

Option array used in timeline. Each item of this array is an echarts option (ECUnitOption).

\n","properties":{}},"media":{"type":["Array"],"description":"

See Responsive Mobile-End for details.

\n","items":{"type":"Object","properties":{"query":{"type":["Object"],"description":"

If more than one properties used, it means "and".

\n","properties":{"minWidth":{"type":["number"],"description":"","default":"undefined"},"maxHeight":{"type":["number"],"description":"","default":"undefined"},"minAspectRatio":{"type":["number"],"description":"

That is the radio of width / height. The value can be like 1.3.

\n","default":"undefined"}}},"option":{"type":["Object"],"description":"

Each item of this array is an echarts option (ECUnitOption). It will be applied when this query is matched.

\n"}}},"properties":{}}}}} \ No newline at end of file diff --git a/src/Vizor.ECharts.BindingGenerator/typeinfo.txt b/src/Vizor.ECharts.BindingGenerator/typeinfo.txt new file mode 100644 index 00000000..b8f51006 --- /dev/null +++ b/src/Vizor.ECharts.BindingGenerator/typeinfo.txt @@ -0,0 +1,3277 @@ + +#RichStyleName: 366 (similarity: 366) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,padding,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .ThemeRiverSeries.select.label.rich.RichStyleName + .ThemeRiverSeries.blur.label.rich.RichStyleName + .ThemeRiverSeries.emphasis.label.rich.RichStyleName + .ThemeRiverSeries.label.rich.RichStyleName + .PictorialBarSeries.markArea.blur.label.rich.RichStyleName + .PictorialBarSeries.markArea.emphasis.label.rich.RichStyleName + .PictorialBarSeries.markArea.label.rich.RichStyleName + .PictorialBarSeries.markLine.blur.label.rich.RichStyleName + .PictorialBarSeries.markLine.emphasis.label.rich.RichStyleName + .PictorialBarSeries.markLine.label.rich.RichStyleName + .PictorialBarSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .PictorialBarSeries.markPoint.markPointData.label.rich.RichStyleName + .PictorialBarSeries.markPoint.blur.label.rich.RichStyleName + .PictorialBarSeries.markPoint.emphasis.label.rich.RichStyleName + .PictorialBarSeries.markPoint.label.rich.RichStyleName + .PictorialBarSeries.PictorialBarSeriesData.select.label.rich.RichStyleName + .PictorialBarSeries.PictorialBarSeriesData.blur.label.rich.RichStyleName + .PictorialBarSeries.PictorialBarSeriesData.emphasis.label.rich.RichStyleName + .PictorialBarSeries.PictorialBarSeriesData.label.rich.RichStyleName + .PictorialBarSeries.select.label.rich.RichStyleName + .PictorialBarSeries.blur.label.rich.RichStyleName + .PictorialBarSeries.emphasis.label.rich.RichStyleName + .PictorialBarSeries.label.rich.RichStyleName + .GaugeSeries.markArea.blur.label.rich.RichStyleName + .GaugeSeries.markArea.emphasis.label.rich.RichStyleName + .GaugeSeries.markArea.label.rich.RichStyleName + .GaugeSeries.markLine.blur.label.rich.RichStyleName + .GaugeSeries.markLine.emphasis.label.rich.RichStyleName + .GaugeSeries.markLine.label.rich.RichStyleName + .GaugeSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .GaugeSeries.markPoint.markPointData.label.rich.RichStyleName + .GaugeSeries.markPoint.blur.label.rich.RichStyleName + .GaugeSeries.markPoint.emphasis.label.rich.RichStyleName + .GaugeSeries.markPoint.label.rich.RichStyleName + .GaugeSeries.detail.rich.RichStyleName + .GaugeSeries.title.rich.RichStyleName + .GaugeSeries.axisLabel.rich.RichStyleName + .GaugeSeries.GaugeSeriesData.detail.rich.RichStyleName + .GaugeSeries.GaugeSeriesData.title.rich.RichStyleName + .FunnelSeries.markArea.blur.label.rich.RichStyleName + .FunnelSeries.markArea.emphasis.label.rich.RichStyleName + .FunnelSeries.markArea.label.rich.RichStyleName + .FunnelSeries.markLine.blur.label.rich.RichStyleName + .FunnelSeries.markLine.emphasis.label.rich.RichStyleName + .FunnelSeries.markLine.label.rich.RichStyleName + .FunnelSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .FunnelSeries.markPoint.markPointData.label.rich.RichStyleName + .FunnelSeries.markPoint.blur.label.rich.RichStyleName + .FunnelSeries.markPoint.emphasis.label.rich.RichStyleName + .FunnelSeries.markPoint.label.rich.RichStyleName + .FunnelSeries.FunnelSeriesData.select.label.rich.RichStyleName + .FunnelSeries.FunnelSeriesData.blur.label.rich.RichStyleName + .FunnelSeries.FunnelSeriesData.emphasis.label.rich.RichStyleName + .FunnelSeries.FunnelSeriesData.label.rich.RichStyleName + .FunnelSeries.select.label.rich.RichStyleName + .FunnelSeries.blur.label.rich.RichStyleName + .FunnelSeries.emphasis.label.rich.RichStyleName + .FunnelSeries.label.rich.RichStyleName + .SankeySeries.SankeySeriesLink.select.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLink.blur.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLink.emphasis.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLink.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesData.select.label.rich.RichStyleName + .SankeySeries.SankeySeriesData.blur.label.rich.RichStyleName + .SankeySeries.SankeySeriesData.emphasis.label.rich.RichStyleName + .SankeySeries.SankeySeriesData.label.rich.RichStyleName + .SankeySeries.select.edgeLabel.rich.RichStyleName + .SankeySeries.select.label.rich.RichStyleName + .SankeySeries.blur.edgeLabel.rich.RichStyleName + .SankeySeries.blur.label.rich.RichStyleName + .SankeySeries.emphasis.edgeLabel.rich.RichStyleName + .SankeySeries.emphasis.label.rich.RichStyleName + .SankeySeries.label.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.select.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.select.label.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.blur.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.blur.label.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.emphasis.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.emphasis.label.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.edgeLabel.rich.RichStyleName + .SankeySeries.SankeySeriesLevel.label.rich.RichStyleName + .SankeySeries.edgeLabel.rich.RichStyleName + .GraphSeries.markArea.blur.label.rich.RichStyleName + .GraphSeries.markArea.emphasis.label.rich.RichStyleName + .GraphSeries.markArea.label.rich.RichStyleName + .GraphSeries.markLine.blur.label.rich.RichStyleName + .GraphSeries.markLine.emphasis.label.rich.RichStyleName + .GraphSeries.markLine.label.rich.RichStyleName + .GraphSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .GraphSeries.markPoint.markPointData.label.rich.RichStyleName + .GraphSeries.markPoint.blur.label.rich.RichStyleName + .GraphSeries.markPoint.emphasis.label.rich.RichStyleName + .GraphSeries.markPoint.label.rich.RichStyleName + .GraphSeries.GraphSeriesLink.select.label.rich.RichStyleName + .GraphSeries.GraphSeriesLink.blur.label.rich.RichStyleName + .GraphSeries.GraphSeriesLink.emphasis.label.rich.RichStyleName + .GraphSeries.GraphSeriesLink.label.rich.RichStyleName + .GraphSeries.GraphSeriesData.select.label.rich.RichStyleName + .GraphSeries.GraphSeriesData.blur.label.rich.RichStyleName + .GraphSeries.GraphSeriesData.emphasis.label.rich.RichStyleName + .GraphSeries.GraphSeriesData.label.rich.RichStyleName + .GraphSeries.GraphSeriesCategory.select.label.rich.RichStyleName + .GraphSeries.GraphSeriesCategory.blur.label.rich.RichStyleName + .GraphSeries.GraphSeriesCategory.emphasis.label.rich.RichStyleName + .GraphSeries.GraphSeriesCategory.label.rich.RichStyleName + .GraphSeries.select.edgeLabel.rich.RichStyleName + .GraphSeries.select.label.rich.RichStyleName + .GraphSeries.blur.edgeLabel.rich.RichStyleName + .GraphSeries.blur.label.rich.RichStyleName + .GraphSeries.emphasis.edgeLabel.rich.RichStyleName + .GraphSeries.emphasis.label.rich.RichStyleName + .GraphSeries.edgeLabel.rich.RichStyleName + .GraphSeries.label.rich.RichStyleName + .LinesSeries.markArea.blur.label.rich.RichStyleName + .LinesSeries.markArea.emphasis.label.rich.RichStyleName + .LinesSeries.markArea.label.rich.RichStyleName + .LinesSeries.markLine.blur.label.rich.RichStyleName + .LinesSeries.markLine.emphasis.label.rich.RichStyleName + .LinesSeries.markLine.label.rich.RichStyleName + .LinesSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .LinesSeries.markPoint.markPointData.label.rich.RichStyleName + .LinesSeries.markPoint.blur.label.rich.RichStyleName + .LinesSeries.markPoint.emphasis.label.rich.RichStyleName + .LinesSeries.markPoint.label.rich.RichStyleName + .LinesSeries.LinesSeriesData.select.label.rich.RichStyleName + .LinesSeries.LinesSeriesData.blur.label.rich.RichStyleName + .LinesSeries.LinesSeriesData.emphasis.label.rich.RichStyleName + .LinesSeries.LinesSeriesData.label.rich.RichStyleName + .LinesSeries.select.label.rich.RichStyleName + .LinesSeries.blur.label.rich.RichStyleName + .LinesSeries.emphasis.label.rich.RichStyleName + .LinesSeries.label.rich.RichStyleName + .MapSeries.markArea.blur.label.rich.RichStyleName + .MapSeries.markArea.emphasis.label.rich.RichStyleName + .MapSeries.markArea.label.rich.RichStyleName + .MapSeries.markLine.blur.label.rich.RichStyleName + .MapSeries.markLine.emphasis.label.rich.RichStyleName + .MapSeries.markLine.label.rich.RichStyleName + .MapSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .MapSeries.markPoint.markPointData.label.rich.RichStyleName + .MapSeries.markPoint.blur.label.rich.RichStyleName + .MapSeries.markPoint.emphasis.label.rich.RichStyleName + .MapSeries.markPoint.label.rich.RichStyleName + .MapSeries.MapSeriesData.select.label.rich.RichStyleName + .MapSeries.MapSeriesData.emphasis.label.rich.RichStyleName + .MapSeries.MapSeriesData.label.rich.RichStyleName + .MapSeries.select.label.rich.RichStyleName + .MapSeries.emphasis.label.rich.RichStyleName + .MapSeries.label.rich.RichStyleName + .HeatmapSeries.markArea.blur.label.rich.RichStyleName + .HeatmapSeries.markArea.emphasis.label.rich.RichStyleName + .HeatmapSeries.markArea.label.rich.RichStyleName + .HeatmapSeries.markLine.blur.label.rich.RichStyleName + .HeatmapSeries.markLine.emphasis.label.rich.RichStyleName + .HeatmapSeries.markLine.label.rich.RichStyleName + .HeatmapSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .HeatmapSeries.markPoint.markPointData.label.rich.RichStyleName + .HeatmapSeries.markPoint.blur.label.rich.RichStyleName + .HeatmapSeries.markPoint.emphasis.label.rich.RichStyleName + .HeatmapSeries.markPoint.label.rich.RichStyleName + .HeatmapSeries.HeatmapSeriesData.emphasis.label.rich.RichStyleName + .HeatmapSeries.HeatmapSeriesData.label.rich.RichStyleName + .HeatmapSeries.select.label.rich.RichStyleName + .HeatmapSeries.blur.label.rich.RichStyleName + .HeatmapSeries.emphasis.label.rich.RichStyleName + .HeatmapSeries.label.rich.RichStyleName + .CandlestickSeries.markArea.blur.label.rich.RichStyleName + .CandlestickSeries.markArea.emphasis.label.rich.RichStyleName + .CandlestickSeries.markArea.label.rich.RichStyleName + .CandlestickSeries.markLine.blur.label.rich.RichStyleName + .CandlestickSeries.markLine.emphasis.label.rich.RichStyleName + .CandlestickSeries.markLine.label.rich.RichStyleName + .CandlestickSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .CandlestickSeries.markPoint.markPointData.label.rich.RichStyleName + .CandlestickSeries.markPoint.blur.label.rich.RichStyleName + .CandlestickSeries.markPoint.emphasis.label.rich.RichStyleName + .CandlestickSeries.markPoint.label.rich.RichStyleName + .BoxplotSeries.markArea.blur.label.rich.RichStyleName + .BoxplotSeries.markArea.emphasis.label.rich.RichStyleName + .BoxplotSeries.markArea.label.rich.RichStyleName + .BoxplotSeries.markLine.blur.label.rich.RichStyleName + .BoxplotSeries.markLine.emphasis.label.rich.RichStyleName + .BoxplotSeries.markLine.label.rich.RichStyleName + .BoxplotSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .BoxplotSeries.markPoint.markPointData.label.rich.RichStyleName + .BoxplotSeries.markPoint.blur.label.rich.RichStyleName + .BoxplotSeries.markPoint.emphasis.label.rich.RichStyleName + .BoxplotSeries.markPoint.label.rich.RichStyleName + .SunburstSeries.SunburstSeriesLevel.label.rich.RichStyleName + .SunburstSeries.label.rich.RichStyleName + .SunburstSeries.SunburstSeriesData.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.select.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.select.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.blur.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.blur.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.emphasis.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.emphasis.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesData.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.select.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.select.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.blur.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.blur.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.emphasis.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.emphasis.label.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.upperLabel.rich.RichStyleName + .TreemapSeries.TreemapSeriesLevel.label.rich.RichStyleName + .TreemapSeries.breadcrumb.emphasis.itemStyle.textStyle.rich.RichStyleName + .TreemapSeries.breadcrumb.itemStyle.textStyle.rich.RichStyleName + .TreemapSeries.select.upperLabel.rich.RichStyleName + .TreemapSeries.select.label.rich.RichStyleName + .TreemapSeries.blur.upperLabel.rich.RichStyleName + .TreemapSeries.blur.label.rich.RichStyleName + .TreemapSeries.emphasis.upperLabel.rich.RichStyleName + .TreemapSeries.emphasis.label.rich.RichStyleName + .TreemapSeries.upperLabel.rich.RichStyleName + .TreemapSeries.label.rich.RichStyleName + .TreeSeries.leaves.select.label.rich.RichStyleName + .TreeSeries.leaves.blur.label.rich.RichStyleName + .TreeSeries.leaves.emphasis.label.rich.RichStyleName + .TreeSeries.leaves.label.rich.RichStyleName + .TreeSeries.select.label.rich.RichStyleName + .TreeSeries.blur.label.rich.RichStyleName + .TreeSeries.emphasis.label.rich.RichStyleName + .TreeSeries.label.rich.RichStyleName + .RadarSeries.RadarSeriesData.select.label.rich.RichStyleName + .RadarSeries.RadarSeriesData.blur.label.rich.RichStyleName + .RadarSeries.RadarSeriesData.emphasis.label.rich.RichStyleName + .RadarSeries.RadarSeriesData.label.rich.RichStyleName + .RadarSeries.select.label.rich.RichStyleName + .RadarSeries.blur.label.rich.RichStyleName + .RadarSeries.emphasis.label.rich.RichStyleName + .RadarSeries.label.rich.RichStyleName + .EffectScatterSeries.markArea.blur.label.rich.RichStyleName + .EffectScatterSeries.markArea.emphasis.label.rich.RichStyleName + .EffectScatterSeries.markArea.label.rich.RichStyleName + .EffectScatterSeries.markLine.blur.label.rich.RichStyleName + .EffectScatterSeries.markLine.emphasis.label.rich.RichStyleName + .EffectScatterSeries.markLine.label.rich.RichStyleName + .EffectScatterSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .EffectScatterSeries.markPoint.markPointData.label.rich.RichStyleName + .EffectScatterSeries.markPoint.blur.label.rich.RichStyleName + .EffectScatterSeries.markPoint.emphasis.label.rich.RichStyleName + .EffectScatterSeries.markPoint.label.rich.RichStyleName + .EffectScatterSeries.EffectScatterSeriesData.select.label.rich.RichStyleName + .EffectScatterSeries.EffectScatterSeriesData.blur.label.rich.RichStyleName + .EffectScatterSeries.EffectScatterSeriesData.emphasis.label.rich.RichStyleName + .EffectScatterSeries.EffectScatterSeriesData.label.rich.RichStyleName + .EffectScatterSeries.select.label.rich.RichStyleName + .EffectScatterSeries.blur.label.rich.RichStyleName + .EffectScatterSeries.emphasis.label.rich.RichStyleName + .EffectScatterSeries.label.rich.RichStyleName + .ScatterSeries.markArea.blur.label.rich.RichStyleName + .ScatterSeries.markArea.emphasis.label.rich.RichStyleName + .ScatterSeries.markArea.label.rich.RichStyleName + .ScatterSeries.markLine.blur.label.rich.RichStyleName + .ScatterSeries.markLine.emphasis.label.rich.RichStyleName + .ScatterSeries.markLine.label.rich.RichStyleName + .ScatterSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .ScatterSeries.markPoint.markPointData.label.rich.RichStyleName + .ScatterSeries.markPoint.blur.label.rich.RichStyleName + .ScatterSeries.markPoint.emphasis.label.rich.RichStyleName + .ScatterSeries.markPoint.label.rich.RichStyleName + .ScatterSeries.ScatterSeriesData.select.label.rich.RichStyleName + .ScatterSeries.ScatterSeriesData.blur.label.rich.RichStyleName + .ScatterSeries.ScatterSeriesData.emphasis.label.rich.RichStyleName + .ScatterSeries.ScatterSeriesData.label.rich.RichStyleName + .ScatterSeries.select.label.rich.RichStyleName + .ScatterSeries.blur.label.rich.RichStyleName + .ScatterSeries.emphasis.label.rich.RichStyleName + .ScatterSeries.label.rich.RichStyleName + .PieSeries.markArea.blur.label.rich.RichStyleName + .PieSeries.markArea.emphasis.label.rich.RichStyleName + .PieSeries.markArea.label.rich.RichStyleName + .PieSeries.markLine.blur.label.rich.RichStyleName + .PieSeries.markLine.emphasis.label.rich.RichStyleName + .PieSeries.markLine.label.rich.RichStyleName + .PieSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .PieSeries.markPoint.markPointData.label.rich.RichStyleName + .PieSeries.markPoint.blur.label.rich.RichStyleName + .PieSeries.markPoint.emphasis.label.rich.RichStyleName + .PieSeries.markPoint.label.rich.RichStyleName + .PieSeries.PieSeriesData.select.label.rich.RichStyleName + .PieSeries.PieSeriesData.blur.label.rich.RichStyleName + .PieSeries.PieSeriesData.emphasis.label.rich.RichStyleName + .PieSeries.PieSeriesData.label.rich.RichStyleName + .PieSeries.select.label.rich.RichStyleName + .PieSeries.blur.label.rich.RichStyleName + .PieSeries.emphasis.label.rich.RichStyleName + .PieSeries.label.rich.RichStyleName + .BarSeries.markArea.blur.label.rich.RichStyleName + .BarSeries.markArea.emphasis.label.rich.RichStyleName + .BarSeries.markArea.label.rich.RichStyleName + .BarSeries.markLine.blur.label.rich.RichStyleName + .BarSeries.markLine.emphasis.label.rich.RichStyleName + .BarSeries.markLine.label.rich.RichStyleName + .BarSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .BarSeries.markPoint.markPointData.label.rich.RichStyleName + .BarSeries.markPoint.blur.label.rich.RichStyleName + .BarSeries.markPoint.emphasis.label.rich.RichStyleName + .BarSeries.markPoint.label.rich.RichStyleName + .BarSeries.BarSeriesData.select.label.rich.RichStyleName + .BarSeries.BarSeriesData.blur.label.rich.RichStyleName + .BarSeries.BarSeriesData.emphasis.label.rich.RichStyleName + .BarSeries.BarSeriesData.label.rich.RichStyleName + .BarSeries.select.label.rich.RichStyleName + .BarSeries.blur.label.rich.RichStyleName + .BarSeries.emphasis.label.rich.RichStyleName + .BarSeries.label.rich.RichStyleName + .LineSeries.markArea.blur.label.rich.RichStyleName + .LineSeries.markArea.emphasis.label.rich.RichStyleName + .LineSeries.markArea.label.rich.RichStyleName + .LineSeries.markLine.blur.label.rich.RichStyleName + .LineSeries.markLine.emphasis.label.rich.RichStyleName + .LineSeries.markLine.label.rich.RichStyleName + .LineSeries.markPoint.markPointData.emphasis.label.rich.RichStyleName + .LineSeries.markPoint.markPointData.label.rich.RichStyleName + .LineSeries.markPoint.blur.label.rich.RichStyleName + .LineSeries.markPoint.emphasis.label.rich.RichStyleName + .LineSeries.markPoint.label.rich.RichStyleName + .LineSeries.LineSeriesData.select.label.rich.RichStyleName + .LineSeries.LineSeriesData.blur.label.rich.RichStyleName + .LineSeries.LineSeriesData.emphasis.label.rich.RichStyleName + .LineSeries.LineSeriesData.label.rich.RichStyleName + .LineSeries.select.endLabel.rich.RichStyleName + .LineSeries.select.label.rich.RichStyleName + .LineSeries.blur.endLabel.rich.RichStyleName + .LineSeries.blur.label.rich.RichStyleName + .LineSeries.emphasis.endLabel.rich.RichStyleName + .LineSeries.emphasis.label.rich.RichStyleName + .LineSeries.endLabel.rich.RichStyleName + .LineSeries.label.rich.RichStyleName + .calendar.yearLabel.rich.RichStyleName + .calendar.monthLabel.rich.RichStyleName + .calendar.dayLabel.rich.RichStyleName + .timeline.emphasis.label.rich.RichStyleName + .timeline.progress.label.rich.RichStyleName + .timeline.label.rich.RichStyleName + .singleAxis.axisLabel.rich.RichStyleName + .singleAxis.nameTextStyle.rich.RichStyleName + .parallelAxis.axisLabel.rich.RichStyleName + .parallelAxis.nameTextStyle.rich.RichStyleName + .parallel.parallelAxisDefault.axisLabel.rich.RichStyleName + .parallel.parallelAxisDefault.nameTextStyle.rich.RichStyleName + .geo.geoRegion.blur.label.rich.RichStyleName + .geo.geoRegion.select.label.rich.RichStyleName + .geo.geoRegion.emphasis.label.rich.RichStyleName + .geo.geoRegion.label.rich.RichStyleName + .geo.blur.label.rich.RichStyleName + .geo.select.label.rich.RichStyleName + .geo.emphasis.label.rich.RichStyleName + .geo.label.rich.RichStyleName + .radar.axisLabel.rich.RichStyleName + .radar.axisName.rich.RichStyleName + .angleAxis.axisLabel.rich.RichStyleName + .radiusAxis.axisLabel.rich.RichStyleName + .radiusAxis.nameTextStyle.rich.RichStyleName + .yAxis.axisLabel.rich.RichStyleName + .yAxis.nameTextStyle.rich.RichStyleName + .xAxis.axisLabel.rich.RichStyleName + .xAxis.nameTextStyle.rich.RichStyleName + .legend.selectorLabel.rich.RichStyleName + .legend.emphasis.selectorLabel.rich.RichStyleName + .legend.textStyle.rich.RichStyleName + .title.subtextStyle.rich.RichStyleName + .title.textStyle.rich.RichStyleName + + +#rich: 366 (similarity: 366) +# RichStyleName + .ThemeRiverSeries.select.label.rich + .ThemeRiverSeries.blur.label.rich + .ThemeRiverSeries.emphasis.label.rich + .ThemeRiverSeries.label.rich + .PictorialBarSeries.markArea.blur.label.rich + .PictorialBarSeries.markArea.emphasis.label.rich + .PictorialBarSeries.markArea.label.rich + .PictorialBarSeries.markLine.blur.label.rich + .PictorialBarSeries.markLine.emphasis.label.rich + .PictorialBarSeries.markLine.label.rich + .PictorialBarSeries.markPoint.markPointData.emphasis.label.rich + .PictorialBarSeries.markPoint.markPointData.label.rich + .PictorialBarSeries.markPoint.blur.label.rich + .PictorialBarSeries.markPoint.emphasis.label.rich + .PictorialBarSeries.markPoint.label.rich + .PictorialBarSeries.PictorialBarSeriesData.select.label.rich + .PictorialBarSeries.PictorialBarSeriesData.blur.label.rich + .PictorialBarSeries.PictorialBarSeriesData.emphasis.label.rich + .PictorialBarSeries.PictorialBarSeriesData.label.rich + .PictorialBarSeries.select.label.rich + .PictorialBarSeries.blur.label.rich + .PictorialBarSeries.emphasis.label.rich + .PictorialBarSeries.label.rich + .GaugeSeries.markArea.blur.label.rich + .GaugeSeries.markArea.emphasis.label.rich + .GaugeSeries.markArea.label.rich + .GaugeSeries.markLine.blur.label.rich + .GaugeSeries.markLine.emphasis.label.rich + .GaugeSeries.markLine.label.rich + .GaugeSeries.markPoint.markPointData.emphasis.label.rich + .GaugeSeries.markPoint.markPointData.label.rich + .GaugeSeries.markPoint.blur.label.rich + .GaugeSeries.markPoint.emphasis.label.rich + .GaugeSeries.markPoint.label.rich + .GaugeSeries.detail.rich + .GaugeSeries.title.rich + .GaugeSeries.axisLabel.rich + .GaugeSeries.GaugeSeriesData.detail.rich + .GaugeSeries.GaugeSeriesData.title.rich + .FunnelSeries.markArea.blur.label.rich + .FunnelSeries.markArea.emphasis.label.rich + .FunnelSeries.markArea.label.rich + .FunnelSeries.markLine.blur.label.rich + .FunnelSeries.markLine.emphasis.label.rich + .FunnelSeries.markLine.label.rich + .FunnelSeries.markPoint.markPointData.emphasis.label.rich + .FunnelSeries.markPoint.markPointData.label.rich + .FunnelSeries.markPoint.blur.label.rich + .FunnelSeries.markPoint.emphasis.label.rich + .FunnelSeries.markPoint.label.rich + .FunnelSeries.FunnelSeriesData.select.label.rich + .FunnelSeries.FunnelSeriesData.blur.label.rich + .FunnelSeries.FunnelSeriesData.emphasis.label.rich + .FunnelSeries.FunnelSeriesData.label.rich + .FunnelSeries.select.label.rich + .FunnelSeries.blur.label.rich + .FunnelSeries.emphasis.label.rich + .FunnelSeries.label.rich + .SankeySeries.SankeySeriesLink.select.edgeLabel.rich + .SankeySeries.SankeySeriesLink.blur.edgeLabel.rich + .SankeySeries.SankeySeriesLink.emphasis.edgeLabel.rich + .SankeySeries.SankeySeriesLink.edgeLabel.rich + .SankeySeries.SankeySeriesData.select.label.rich + .SankeySeries.SankeySeriesData.blur.label.rich + .SankeySeries.SankeySeriesData.emphasis.label.rich + .SankeySeries.SankeySeriesData.label.rich + .SankeySeries.select.edgeLabel.rich + .SankeySeries.select.label.rich + .SankeySeries.blur.edgeLabel.rich + .SankeySeries.blur.label.rich + .SankeySeries.emphasis.edgeLabel.rich + .SankeySeries.emphasis.label.rich + .SankeySeries.label.rich + .SankeySeries.SankeySeriesLevel.select.edgeLabel.rich + .SankeySeries.SankeySeriesLevel.select.label.rich + .SankeySeries.SankeySeriesLevel.blur.edgeLabel.rich + .SankeySeries.SankeySeriesLevel.blur.label.rich + .SankeySeries.SankeySeriesLevel.emphasis.edgeLabel.rich + .SankeySeries.SankeySeriesLevel.emphasis.label.rich + .SankeySeries.SankeySeriesLevel.edgeLabel.rich + .SankeySeries.SankeySeriesLevel.label.rich + .SankeySeries.edgeLabel.rich + .GraphSeries.markArea.blur.label.rich + .GraphSeries.markArea.emphasis.label.rich + .GraphSeries.markArea.label.rich + .GraphSeries.markLine.blur.label.rich + .GraphSeries.markLine.emphasis.label.rich + .GraphSeries.markLine.label.rich + .GraphSeries.markPoint.markPointData.emphasis.label.rich + .GraphSeries.markPoint.markPointData.label.rich + .GraphSeries.markPoint.blur.label.rich + .GraphSeries.markPoint.emphasis.label.rich + .GraphSeries.markPoint.label.rich + .GraphSeries.GraphSeriesLink.select.label.rich + .GraphSeries.GraphSeriesLink.blur.label.rich + .GraphSeries.GraphSeriesLink.emphasis.label.rich + .GraphSeries.GraphSeriesLink.label.rich + .GraphSeries.GraphSeriesData.select.label.rich + .GraphSeries.GraphSeriesData.blur.label.rich + .GraphSeries.GraphSeriesData.emphasis.label.rich + .GraphSeries.GraphSeriesData.label.rich + .GraphSeries.GraphSeriesCategory.select.label.rich + .GraphSeries.GraphSeriesCategory.blur.label.rich + .GraphSeries.GraphSeriesCategory.emphasis.label.rich + .GraphSeries.GraphSeriesCategory.label.rich + .GraphSeries.select.edgeLabel.rich + .GraphSeries.select.label.rich + .GraphSeries.blur.edgeLabel.rich + .GraphSeries.blur.label.rich + .GraphSeries.emphasis.edgeLabel.rich + .GraphSeries.emphasis.label.rich + .GraphSeries.edgeLabel.rich + .GraphSeries.label.rich + .LinesSeries.markArea.blur.label.rich + .LinesSeries.markArea.emphasis.label.rich + .LinesSeries.markArea.label.rich + .LinesSeries.markLine.blur.label.rich + .LinesSeries.markLine.emphasis.label.rich + .LinesSeries.markLine.label.rich + .LinesSeries.markPoint.markPointData.emphasis.label.rich + .LinesSeries.markPoint.markPointData.label.rich + .LinesSeries.markPoint.blur.label.rich + .LinesSeries.markPoint.emphasis.label.rich + .LinesSeries.markPoint.label.rich + .LinesSeries.LinesSeriesData.select.label.rich + .LinesSeries.LinesSeriesData.blur.label.rich + .LinesSeries.LinesSeriesData.emphasis.label.rich + .LinesSeries.LinesSeriesData.label.rich + .LinesSeries.select.label.rich + .LinesSeries.blur.label.rich + .LinesSeries.emphasis.label.rich + .LinesSeries.label.rich + .MapSeries.markArea.blur.label.rich + .MapSeries.markArea.emphasis.label.rich + .MapSeries.markArea.label.rich + .MapSeries.markLine.blur.label.rich + .MapSeries.markLine.emphasis.label.rich + .MapSeries.markLine.label.rich + .MapSeries.markPoint.markPointData.emphasis.label.rich + .MapSeries.markPoint.markPointData.label.rich + .MapSeries.markPoint.blur.label.rich + .MapSeries.markPoint.emphasis.label.rich + .MapSeries.markPoint.label.rich + .MapSeries.MapSeriesData.select.label.rich + .MapSeries.MapSeriesData.emphasis.label.rich + .MapSeries.MapSeriesData.label.rich + .MapSeries.select.label.rich + .MapSeries.emphasis.label.rich + .MapSeries.label.rich + .HeatmapSeries.markArea.blur.label.rich + .HeatmapSeries.markArea.emphasis.label.rich + .HeatmapSeries.markArea.label.rich + .HeatmapSeries.markLine.blur.label.rich + .HeatmapSeries.markLine.emphasis.label.rich + .HeatmapSeries.markLine.label.rich + .HeatmapSeries.markPoint.markPointData.emphasis.label.rich + .HeatmapSeries.markPoint.markPointData.label.rich + .HeatmapSeries.markPoint.blur.label.rich + .HeatmapSeries.markPoint.emphasis.label.rich + .HeatmapSeries.markPoint.label.rich + .HeatmapSeries.HeatmapSeriesData.emphasis.label.rich + .HeatmapSeries.HeatmapSeriesData.label.rich + .HeatmapSeries.select.label.rich + .HeatmapSeries.blur.label.rich + .HeatmapSeries.emphasis.label.rich + .HeatmapSeries.label.rich + .CandlestickSeries.markArea.blur.label.rich + .CandlestickSeries.markArea.emphasis.label.rich + .CandlestickSeries.markArea.label.rich + .CandlestickSeries.markLine.blur.label.rich + .CandlestickSeries.markLine.emphasis.label.rich + .CandlestickSeries.markLine.label.rich + .CandlestickSeries.markPoint.markPointData.emphasis.label.rich + .CandlestickSeries.markPoint.markPointData.label.rich + .CandlestickSeries.markPoint.blur.label.rich + .CandlestickSeries.markPoint.emphasis.label.rich + .CandlestickSeries.markPoint.label.rich + .BoxplotSeries.markArea.blur.label.rich + .BoxplotSeries.markArea.emphasis.label.rich + .BoxplotSeries.markArea.label.rich + .BoxplotSeries.markLine.blur.label.rich + .BoxplotSeries.markLine.emphasis.label.rich + .BoxplotSeries.markLine.label.rich + .BoxplotSeries.markPoint.markPointData.emphasis.label.rich + .BoxplotSeries.markPoint.markPointData.label.rich + .BoxplotSeries.markPoint.blur.label.rich + .BoxplotSeries.markPoint.emphasis.label.rich + .BoxplotSeries.markPoint.label.rich + .SunburstSeries.SunburstSeriesLevel.label.rich + .SunburstSeries.label.rich + .SunburstSeries.SunburstSeriesData.label.rich + .TreemapSeries.TreemapSeriesData.select.upperLabel.rich + .TreemapSeries.TreemapSeriesData.select.label.rich + .TreemapSeries.TreemapSeriesData.blur.upperLabel.rich + .TreemapSeries.TreemapSeriesData.blur.label.rich + .TreemapSeries.TreemapSeriesData.emphasis.upperLabel.rich + .TreemapSeries.TreemapSeriesData.emphasis.label.rich + .TreemapSeries.TreemapSeriesData.upperLabel.rich + .TreemapSeries.TreemapSeriesData.label.rich + .TreemapSeries.TreemapSeriesLevel.select.upperLabel.rich + .TreemapSeries.TreemapSeriesLevel.select.label.rich + .TreemapSeries.TreemapSeriesLevel.blur.upperLabel.rich + .TreemapSeries.TreemapSeriesLevel.blur.label.rich + .TreemapSeries.TreemapSeriesLevel.emphasis.upperLabel.rich + .TreemapSeries.TreemapSeriesLevel.emphasis.label.rich + .TreemapSeries.TreemapSeriesLevel.upperLabel.rich + .TreemapSeries.TreemapSeriesLevel.label.rich + .TreemapSeries.breadcrumb.emphasis.itemStyle.textStyle.rich + .TreemapSeries.breadcrumb.itemStyle.textStyle.rich + .TreemapSeries.select.upperLabel.rich + .TreemapSeries.select.label.rich + .TreemapSeries.blur.upperLabel.rich + .TreemapSeries.blur.label.rich + .TreemapSeries.emphasis.upperLabel.rich + .TreemapSeries.emphasis.label.rich + .TreemapSeries.upperLabel.rich + .TreemapSeries.label.rich + .TreeSeries.leaves.select.label.rich + .TreeSeries.leaves.blur.label.rich + .TreeSeries.leaves.emphasis.label.rich + .TreeSeries.leaves.label.rich + .TreeSeries.select.label.rich + .TreeSeries.blur.label.rich + .TreeSeries.emphasis.label.rich + .TreeSeries.label.rich + .RadarSeries.RadarSeriesData.select.label.rich + .RadarSeries.RadarSeriesData.blur.label.rich + .RadarSeries.RadarSeriesData.emphasis.label.rich + .RadarSeries.RadarSeriesData.label.rich + .RadarSeries.select.label.rich + .RadarSeries.blur.label.rich + .RadarSeries.emphasis.label.rich + .RadarSeries.label.rich + .EffectScatterSeries.markArea.blur.label.rich + .EffectScatterSeries.markArea.emphasis.label.rich + .EffectScatterSeries.markArea.label.rich + .EffectScatterSeries.markLine.blur.label.rich + .EffectScatterSeries.markLine.emphasis.label.rich + .EffectScatterSeries.markLine.label.rich + .EffectScatterSeries.markPoint.markPointData.emphasis.label.rich + .EffectScatterSeries.markPoint.markPointData.label.rich + .EffectScatterSeries.markPoint.blur.label.rich + .EffectScatterSeries.markPoint.emphasis.label.rich + .EffectScatterSeries.markPoint.label.rich + .EffectScatterSeries.EffectScatterSeriesData.select.label.rich + .EffectScatterSeries.EffectScatterSeriesData.blur.label.rich + .EffectScatterSeries.EffectScatterSeriesData.emphasis.label.rich + .EffectScatterSeries.EffectScatterSeriesData.label.rich + .EffectScatterSeries.select.label.rich + .EffectScatterSeries.blur.label.rich + .EffectScatterSeries.emphasis.label.rich + .EffectScatterSeries.label.rich + .ScatterSeries.markArea.blur.label.rich + .ScatterSeries.markArea.emphasis.label.rich + .ScatterSeries.markArea.label.rich + .ScatterSeries.markLine.blur.label.rich + .ScatterSeries.markLine.emphasis.label.rich + .ScatterSeries.markLine.label.rich + .ScatterSeries.markPoint.markPointData.emphasis.label.rich + .ScatterSeries.markPoint.markPointData.label.rich + .ScatterSeries.markPoint.blur.label.rich + .ScatterSeries.markPoint.emphasis.label.rich + .ScatterSeries.markPoint.label.rich + .ScatterSeries.ScatterSeriesData.select.label.rich + .ScatterSeries.ScatterSeriesData.blur.label.rich + .ScatterSeries.ScatterSeriesData.emphasis.label.rich + .ScatterSeries.ScatterSeriesData.label.rich + .ScatterSeries.select.label.rich + .ScatterSeries.blur.label.rich + .ScatterSeries.emphasis.label.rich + .ScatterSeries.label.rich + .PieSeries.markArea.blur.label.rich + .PieSeries.markArea.emphasis.label.rich + .PieSeries.markArea.label.rich + .PieSeries.markLine.blur.label.rich + .PieSeries.markLine.emphasis.label.rich + .PieSeries.markLine.label.rich + .PieSeries.markPoint.markPointData.emphasis.label.rich + .PieSeries.markPoint.markPointData.label.rich + .PieSeries.markPoint.blur.label.rich + .PieSeries.markPoint.emphasis.label.rich + .PieSeries.markPoint.label.rich + .PieSeries.PieSeriesData.select.label.rich + .PieSeries.PieSeriesData.blur.label.rich + .PieSeries.PieSeriesData.emphasis.label.rich + .PieSeries.PieSeriesData.label.rich + .PieSeries.select.label.rich + .PieSeries.blur.label.rich + .PieSeries.emphasis.label.rich + .PieSeries.label.rich + .BarSeries.markArea.blur.label.rich + .BarSeries.markArea.emphasis.label.rich + .BarSeries.markArea.label.rich + .BarSeries.markLine.blur.label.rich + .BarSeries.markLine.emphasis.label.rich + .BarSeries.markLine.label.rich + .BarSeries.markPoint.markPointData.emphasis.label.rich + .BarSeries.markPoint.markPointData.label.rich + .BarSeries.markPoint.blur.label.rich + .BarSeries.markPoint.emphasis.label.rich + .BarSeries.markPoint.label.rich + .BarSeries.BarSeriesData.select.label.rich + .BarSeries.BarSeriesData.blur.label.rich + .BarSeries.BarSeriesData.emphasis.label.rich + .BarSeries.BarSeriesData.label.rich + .BarSeries.select.label.rich + .BarSeries.blur.label.rich + .BarSeries.emphasis.label.rich + .BarSeries.label.rich + .LineSeries.markArea.blur.label.rich + .LineSeries.markArea.emphasis.label.rich + .LineSeries.markArea.label.rich + .LineSeries.markLine.blur.label.rich + .LineSeries.markLine.emphasis.label.rich + .LineSeries.markLine.label.rich + .LineSeries.markPoint.markPointData.emphasis.label.rich + .LineSeries.markPoint.markPointData.label.rich + .LineSeries.markPoint.blur.label.rich + .LineSeries.markPoint.emphasis.label.rich + .LineSeries.markPoint.label.rich + .LineSeries.LineSeriesData.select.label.rich + .LineSeries.LineSeriesData.blur.label.rich + .LineSeries.LineSeriesData.emphasis.label.rich + .LineSeries.LineSeriesData.label.rich + .LineSeries.select.endLabel.rich + .LineSeries.select.label.rich + .LineSeries.blur.endLabel.rich + .LineSeries.blur.label.rich + .LineSeries.emphasis.endLabel.rich + .LineSeries.emphasis.label.rich + .LineSeries.endLabel.rich + .LineSeries.label.rich + .calendar.yearLabel.rich + .calendar.monthLabel.rich + .calendar.dayLabel.rich + .timeline.emphasis.label.rich + .timeline.progress.label.rich + .timeline.label.rich + .singleAxis.axisLabel.rich + .singleAxis.nameTextStyle.rich + .parallelAxis.axisLabel.rich + .parallelAxis.nameTextStyle.rich + .parallel.parallelAxisDefault.axisLabel.rich + .parallel.parallelAxisDefault.nameTextStyle.rich + .geo.geoRegion.blur.label.rich + .geo.geoRegion.select.label.rich + .geo.geoRegion.emphasis.label.rich + .geo.geoRegion.label.rich + .geo.blur.label.rich + .geo.select.label.rich + .geo.emphasis.label.rich + .geo.label.rich + .radar.axisLabel.rich + .radar.axisName.rich + .angleAxis.axisLabel.rich + .radiusAxis.axisLabel.rich + .radiusAxis.nameTextStyle.rich + .yAxis.axisLabel.rich + .yAxis.nameTextStyle.rich + .xAxis.axisLabel.rich + .xAxis.nameTextStyle.rich + .legend.selectorLabel.rich + .legend.emphasis.selectorLabel.rich + .legend.textStyle.rich + .title.subtextStyle.rich + .title.textStyle.rich + + +#textStyle: 55 (similarity: 1,1,51,2) +# color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,rich,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .title.textStyle + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .legend.textStyle + +# color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .textStyle + .CustomSeries.tooltip.textStyle + .CustomSeries.CustomSeriesData.tooltip.textStyle + .ThemeRiverSeries.tooltip.textStyle + .PictorialBarSeries.tooltip.textStyle + .PictorialBarSeries.PictorialBarSeriesData.tooltip.textStyle + .GaugeSeries.tooltip.textStyle + .FunnelSeries.tooltip.textStyle + .FunnelSeries.FunnelSeriesData.tooltip.textStyle + .SankeySeries.tooltip.textStyle + .SankeySeries.SankeySeriesData.tooltip.textStyle + .GraphSeries.tooltip.textStyle + .GraphSeries.GraphSeriesData.tooltip.textStyle + .LinesSeries.tooltip.textStyle + .LinesSeries.LinesSeriesData.tooltip.textStyle + .MapSeries.tooltip.textStyle + .MapSeries.MapSeriesData.tooltip.textStyle + .HeatmapSeries.tooltip.textStyle + .CandlestickSeries.tooltip.textStyle + .CandlestickSeries.CandlestickSeriesData.tooltip.textStyle + .BoxplotSeries.tooltip.textStyle + .BoxplotSeries.BoxplotSeriesData.tooltip.textStyle + .SunburstSeries.tooltip.textStyle + .SunburstSeries.SunburstSeriesData.tooltip.textStyle + .TreemapSeries.tooltip.textStyle + .TreemapSeries.TreemapSeriesData.tooltip.textStyle + .TreeSeries.tooltip.textStyle + .RadarSeries.tooltip.textStyle + .RadarSeries.RadarSeriesData.tooltip.textStyle + .EffectScatterSeries.tooltip.textStyle + .EffectScatterSeries.EffectScatterSeriesData.tooltip.textStyle + .ScatterSeries.tooltip.textStyle + .ScatterSeries.ScatterSeriesData.tooltip.textStyle + .PieSeries.tooltip.textStyle + .PieSeries.PieSeriesData.tooltip.textStyle + .BarSeries.tooltip.textStyle + .LineSeries.tooltip.textStyle + .LineSeries.LineSeriesData.tooltip.textStyle + .singleAxis.tooltip.textStyle + .parallelAxis.tooltip.textStyle + .parallel.parallelAxisDefault.tooltip.textStyle + .geo.tooltip.textStyle + .geo.geoRegion.tooltip.textStyle + .tooltip.textStyle + .angleAxis.tooltip.textStyle + .radiusAxis.tooltip.textStyle + .polar.tooltip.textStyle + .yAxis.tooltip.textStyle + .xAxis.tooltip.textStyle + .grid.tooltip.textStyle + .legend.legendData.textStyle + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .TreemapSeries.breadcrumb.emphasis.itemStyle.textStyle + .TreemapSeries.breadcrumb.itemStyle.textStyle + + +#subtextStyle: 1 (similarity: 1) +# align,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,rich,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .title.subtextStyle + + +#title: 6 (similarity: 1,1,1,1,2) +# backgroundColor,borderColor,borderRadius,borderWidth,bottom,id,itemGap,left,link,padding,right,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,sublink,subtarget,subtext,subtextStyle,target,text,textAlign,textStyle,textVerticalAlign,top,triggerEvent,z,zlevel + .title + +# back,zoom + .toolbox.feature.dataZoom.title + +# bar,line,stack,tiled + .toolbox.feature.magicType.title + +# clear,keep,lineX,lineY,polygon,rect + .toolbox.feature.brush.title + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,offsetCenter,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,valueAnimation,width + .GaugeSeries.title + .GaugeSeries.GaugeSeriesData.title + + +#decal: 29 (similarity: 29) +# backgroundColor,color,dashArrayX,dashArrayY,maxTileHeight,maxTileWidth,rotation,symbol,symbolKeepAspect,symbolSize + .CustomSeries.CustomSeriesData.itemStyle.decal + .CustomSeries.itemStyle.decal + .ThemeRiverSeries.itemStyle.decal + .PictorialBarSeries.PictorialBarSeriesData.itemStyle.decal + .PictorialBarSeries.itemStyle.decal + .GaugeSeries.itemStyle.decal + .GaugeSeries.GaugeSeriesData.itemStyle.decal + .FunnelSeries.FunnelSeriesData.itemStyle.decal + .FunnelSeries.itemStyle.decal + .SankeySeries.SankeySeriesData.select.itemStyle.decal + .SankeySeries.SankeySeriesData.blur.itemStyle.decal + .SankeySeries.SankeySeriesData.emphasis.itemStyle.decal + .SankeySeries.SankeySeriesData.itemStyle.decal + .SankeySeries.itemStyle.decal + .BoxplotSeries.BoxplotSeriesData.itemStyle.decal + .BoxplotSeries.itemStyle.decal + .SunburstSeries.itemStyle.decal + .SunburstSeries.SunburstSeriesData.itemStyle.decal + .TreemapSeries.TreemapSeriesData.itemStyle.decal + .TreemapSeries.TreemapSeriesLevel.itemStyle.decal + .TreemapSeries.itemStyle.decal + .RadarSeries.itemStyle.decal + .PieSeries.PieSeriesData.itemStyle.decal + .PieSeries.itemStyle.decal + .BarSeries.BarSeriesData.itemStyle.decal + .BarSeries.itemStyle.decal + .LineSeries.itemStyle.decal + .legend.legendData.itemStyle.decal + .legend.itemStyle.decal + + +#itemStyle: 251 (similarity: 17,14,171,2,9,6,9,3,9,2,8,1) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,decal,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .CustomSeries.CustomSeriesData.itemStyle + .CustomSeries.itemStyle + .ThemeRiverSeries.itemStyle + .PictorialBarSeries.PictorialBarSeriesData.itemStyle + .PictorialBarSeries.itemStyle + .GaugeSeries.itemStyle + .GaugeSeries.GaugeSeriesData.itemStyle + .FunnelSeries.itemStyle + .SankeySeries.SankeySeriesData.select.itemStyle + .SankeySeries.SankeySeriesData.blur.itemStyle + .SankeySeries.SankeySeriesData.emphasis.itemStyle + .BoxplotSeries.BoxplotSeriesData.itemStyle + .BoxplotSeries.itemStyle + .RadarSeries.itemStyle + .LineSeries.itemStyle + .legend.legendData.itemStyle + .legend.itemStyle + +# areaColor,borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .MapSeries.MapSeriesData.select.itemStyle + .MapSeries.MapSeriesData.emphasis.itemStyle + .MapSeries.MapSeriesData.itemStyle + .MapSeries.select.itemStyle + .MapSeries.emphasis.itemStyle + .MapSeries.itemStyle + .geo.geoRegion.blur.itemStyle + .geo.geoRegion.select.itemStyle + .geo.geoRegion.emphasis.itemStyle + .geo.geoRegion.itemStyle + .geo.blur.itemStyle + .geo.select.itemStyle + .geo.emphasis.itemStyle + .geo.itemStyle + +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .CustomSeries.CustomSeriesData.emphasis.itemStyle + .ThemeRiverSeries.select.itemStyle + .ThemeRiverSeries.blur.itemStyle + .ThemeRiverSeries.emphasis.itemStyle + .PictorialBarSeries.markArea.itemStyle + .PictorialBarSeries.markPoint.markPointData.emphasis.itemStyle + .PictorialBarSeries.markPoint.markPointData.itemStyle + .PictorialBarSeries.markPoint.blur.itemStyle + .PictorialBarSeries.markPoint.emphasis.itemStyle + .PictorialBarSeries.markPoint.itemStyle + .PictorialBarSeries.select.itemStyle + .PictorialBarSeries.blur.itemStyle + .PictorialBarSeries.emphasis.itemStyle + .GaugeSeries.markArea.itemStyle + .GaugeSeries.markPoint.markPointData.emphasis.itemStyle + .GaugeSeries.markPoint.markPointData.itemStyle + .GaugeSeries.markPoint.blur.itemStyle + .GaugeSeries.markPoint.emphasis.itemStyle + .GaugeSeries.markPoint.itemStyle + .GaugeSeries.anchor.itemStyle + .GaugeSeries.pointer.itemStyle + .GaugeSeries.progress.itemStyle + .FunnelSeries.markArea.itemStyle + .FunnelSeries.markPoint.markPointData.emphasis.itemStyle + .FunnelSeries.markPoint.markPointData.itemStyle + .FunnelSeries.markPoint.blur.itemStyle + .FunnelSeries.markPoint.emphasis.itemStyle + .FunnelSeries.markPoint.itemStyle + .FunnelSeries.FunnelSeriesData.select.itemStyle + .FunnelSeries.FunnelSeriesData.blur.itemStyle + .FunnelSeries.FunnelSeriesData.emphasis.itemStyle + .FunnelSeries.select.itemStyle + .FunnelSeries.blur.itemStyle + .FunnelSeries.emphasis.itemStyle + .SankeySeries.select.itemStyle + .SankeySeries.blur.itemStyle + .SankeySeries.emphasis.itemStyle + .SankeySeries.SankeySeriesLevel.select.itemStyle + .SankeySeries.SankeySeriesLevel.blur.itemStyle + .SankeySeries.SankeySeriesLevel.emphasis.itemStyle + .SankeySeries.SankeySeriesLevel.itemStyle + .GraphSeries.markArea.itemStyle + .GraphSeries.markPoint.markPointData.emphasis.itemStyle + .GraphSeries.markPoint.markPointData.itemStyle + .GraphSeries.markPoint.blur.itemStyle + .GraphSeries.markPoint.emphasis.itemStyle + .GraphSeries.markPoint.itemStyle + .GraphSeries.GraphSeriesData.select.itemStyle + .GraphSeries.GraphSeriesData.blur.itemStyle + .GraphSeries.GraphSeriesData.emphasis.itemStyle + .GraphSeries.GraphSeriesData.itemStyle + .GraphSeries.GraphSeriesCategory.select.itemStyle + .GraphSeries.GraphSeriesCategory.blur.itemStyle + .GraphSeries.GraphSeriesCategory.emphasis.itemStyle + .GraphSeries.GraphSeriesCategory.itemStyle + .GraphSeries.select.itemStyle + .GraphSeries.blur.itemStyle + .GraphSeries.emphasis.itemStyle + .GraphSeries.itemStyle + .LinesSeries.markArea.itemStyle + .LinesSeries.markPoint.markPointData.emphasis.itemStyle + .LinesSeries.markPoint.markPointData.itemStyle + .LinesSeries.markPoint.blur.itemStyle + .LinesSeries.markPoint.emphasis.itemStyle + .LinesSeries.markPoint.itemStyle + .MapSeries.markArea.itemStyle + .MapSeries.markPoint.markPointData.emphasis.itemStyle + .MapSeries.markPoint.markPointData.itemStyle + .MapSeries.markPoint.blur.itemStyle + .MapSeries.markPoint.emphasis.itemStyle + .MapSeries.markPoint.itemStyle + .HeatmapSeries.markArea.itemStyle + .HeatmapSeries.markPoint.markPointData.emphasis.itemStyle + .HeatmapSeries.markPoint.markPointData.itemStyle + .HeatmapSeries.markPoint.blur.itemStyle + .HeatmapSeries.markPoint.emphasis.itemStyle + .HeatmapSeries.markPoint.itemStyle + .HeatmapSeries.HeatmapSeriesData.emphasis.itemStyle + .HeatmapSeries.select.itemStyle + .HeatmapSeries.blur.itemStyle + .HeatmapSeries.emphasis.itemStyle + .CandlestickSeries.markArea.itemStyle + .CandlestickSeries.markPoint.markPointData.emphasis.itemStyle + .CandlestickSeries.markPoint.markPointData.itemStyle + .CandlestickSeries.markPoint.blur.itemStyle + .CandlestickSeries.markPoint.emphasis.itemStyle + .CandlestickSeries.markPoint.itemStyle + .BoxplotSeries.markArea.itemStyle + .BoxplotSeries.markPoint.markPointData.emphasis.itemStyle + .BoxplotSeries.markPoint.markPointData.itemStyle + .BoxplotSeries.markPoint.blur.itemStyle + .BoxplotSeries.markPoint.emphasis.itemStyle + .BoxplotSeries.markPoint.itemStyle + .BoxplotSeries.BoxplotSeriesData.select.itemStyle + .BoxplotSeries.BoxplotSeriesData.blur.itemStyle + .BoxplotSeries.BoxplotSeriesData.emphasis.itemStyle + .BoxplotSeries.select.itemStyle + .BoxplotSeries.blur.itemStyle + .BoxplotSeries.emphasis.itemStyle + .TreeSeries.leaves.select.itemStyle + .TreeSeries.leaves.blur.itemStyle + .TreeSeries.leaves.emphasis.itemStyle + .TreeSeries.leaves.itemStyle + .TreeSeries.select.itemStyle + .TreeSeries.blur.itemStyle + .TreeSeries.emphasis.itemStyle + .TreeSeries.itemStyle + .RadarSeries.RadarSeriesData.select.itemStyle + .RadarSeries.RadarSeriesData.blur.itemStyle + .RadarSeries.RadarSeriesData.emphasis.itemStyle + .RadarSeries.RadarSeriesData.itemStyle + .RadarSeries.select.itemStyle + .RadarSeries.blur.itemStyle + .RadarSeries.emphasis.itemStyle + .EffectScatterSeries.markArea.itemStyle + .EffectScatterSeries.markPoint.markPointData.emphasis.itemStyle + .EffectScatterSeries.markPoint.markPointData.itemStyle + .EffectScatterSeries.markPoint.blur.itemStyle + .EffectScatterSeries.markPoint.emphasis.itemStyle + .EffectScatterSeries.markPoint.itemStyle + .EffectScatterSeries.EffectScatterSeriesData.select.itemStyle + .EffectScatterSeries.EffectScatterSeriesData.blur.itemStyle + .EffectScatterSeries.EffectScatterSeriesData.emphasis.itemStyle + .EffectScatterSeries.EffectScatterSeriesData.itemStyle + .EffectScatterSeries.select.itemStyle + .EffectScatterSeries.blur.itemStyle + .EffectScatterSeries.emphasis.itemStyle + .EffectScatterSeries.itemStyle + .ScatterSeries.markArea.itemStyle + .ScatterSeries.markPoint.markPointData.emphasis.itemStyle + .ScatterSeries.markPoint.markPointData.itemStyle + .ScatterSeries.markPoint.blur.itemStyle + .ScatterSeries.markPoint.emphasis.itemStyle + .ScatterSeries.markPoint.itemStyle + .ScatterSeries.ScatterSeriesData.select.itemStyle + .ScatterSeries.ScatterSeriesData.blur.itemStyle + .ScatterSeries.ScatterSeriesData.emphasis.itemStyle + .ScatterSeries.ScatterSeriesData.itemStyle + .ScatterSeries.select.itemStyle + .ScatterSeries.blur.itemStyle + .ScatterSeries.emphasis.itemStyle + .ScatterSeries.itemStyle + .PieSeries.markArea.itemStyle + .PieSeries.markPoint.markPointData.emphasis.itemStyle + .PieSeries.markPoint.markPointData.itemStyle + .PieSeries.markPoint.blur.itemStyle + .PieSeries.markPoint.emphasis.itemStyle + .PieSeries.markPoint.itemStyle + .BarSeries.markArea.itemStyle + .BarSeries.markPoint.markPointData.emphasis.itemStyle + .BarSeries.markPoint.markPointData.itemStyle + .BarSeries.markPoint.blur.itemStyle + .BarSeries.markPoint.emphasis.itemStyle + .BarSeries.markPoint.itemStyle + .LineSeries.markArea.itemStyle + .LineSeries.markPoint.markPointData.emphasis.itemStyle + .LineSeries.markPoint.markPointData.itemStyle + .LineSeries.markPoint.blur.itemStyle + .LineSeries.markPoint.emphasis.itemStyle + .LineSeries.markPoint.itemStyle + .LineSeries.LineSeriesData.select.itemStyle + .LineSeries.LineSeriesData.blur.itemStyle + .LineSeries.LineSeriesData.emphasis.itemStyle + .LineSeries.LineSeriesData.itemStyle + .LineSeries.select.itemStyle + .LineSeries.blur.itemStyle + .LineSeries.emphasis.itemStyle + .calendar.itemStyle + .timeline.emphasis.itemStyle + .timeline.progress.itemStyle + .timeline.itemStyle + +# borderColor,borderRadius,borderType,borderWidth,color,decal,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .BarSeries.BarSeriesData.itemStyle + .BarSeries.itemStyle + +# borderColor,borderRadius,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .PictorialBarSeries.PictorialBarSeriesData.select.itemStyle + .PictorialBarSeries.PictorialBarSeriesData.blur.itemStyle + .PictorialBarSeries.PictorialBarSeriesData.emphasis.itemStyle + .BarSeries.BarSeriesData.select.itemStyle + .BarSeries.BarSeriesData.blur.itemStyle + .BarSeries.BarSeriesData.emphasis.itemStyle + .BarSeries.select.itemStyle + .BarSeries.blur.itemStyle + .BarSeries.emphasis.itemStyle + +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderRadius,borderType,borderWidth,color,decal,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .SankeySeries.SankeySeriesData.itemStyle + .SankeySeries.itemStyle + .SunburstSeries.itemStyle + .SunburstSeries.SunburstSeriesData.itemStyle + .PieSeries.PieSeriesData.itemStyle + .PieSeries.itemStyle + +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderRadius,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .HeatmapSeries.HeatmapSeriesData.itemStyle + .HeatmapSeries.itemStyle + .SunburstSeries.SunburstSeriesLevel.itemStyle + .PieSeries.PieSeriesData.select.itemStyle + .PieSeries.PieSeriesData.blur.itemStyle + .PieSeries.PieSeriesData.emphasis.itemStyle + .PieSeries.select.itemStyle + .PieSeries.blur.itemStyle + .PieSeries.emphasis.itemStyle + +# borderColor,borderColorSaturation,borderRadius,borderWidth,color,decal,gapWidth,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .TreemapSeries.TreemapSeriesData.itemStyle + .TreemapSeries.TreemapSeriesLevel.itemStyle + .TreemapSeries.itemStyle + +# color + .TreemapSeries.TreemapSeriesData.select.itemStyle + .TreemapSeries.TreemapSeriesData.blur.itemStyle + .TreemapSeries.TreemapSeriesData.emphasis.itemStyle + .TreemapSeries.TreemapSeriesLevel.select.itemStyle + .TreemapSeries.TreemapSeriesLevel.blur.itemStyle + .TreemapSeries.TreemapSeriesLevel.emphasis.itemStyle + .TreemapSeries.select.itemStyle + .TreemapSeries.blur.itemStyle + .TreemapSeries.emphasis.itemStyle + +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,textStyle + .TreemapSeries.breadcrumb.emphasis.itemStyle + .TreemapSeries.breadcrumb.itemStyle + +# borderColor,borderColor0,borderColorDoji,borderWidth,color,color0,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .CandlestickSeries.CandlestickSeriesData.select.itemStyle + .CandlestickSeries.CandlestickSeriesData.blur.itemStyle + .CandlestickSeries.CandlestickSeriesData.emphasis.itemStyle + .CandlestickSeries.CandlestickSeriesData.itemStyle + .CandlestickSeries.select.itemStyle + .CandlestickSeries.blur.itemStyle + .CandlestickSeries.emphasis.itemStyle + .CandlestickSeries.itemStyle + +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,decal,height,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .FunnelSeries.FunnelSeriesData.itemStyle + + +#lineStyle: 222 (similarity: 2,175,1,24,7,12,1) +# cap,color,dashOffset,inactiveColor,inactiveWidth,join,miterLimit,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,type,width + .legend.legendData.lineStyle + .legend.lineStyle + +# cap,color,dashOffset,join,miterLimit,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,type,width + .CustomSeries.labelLine.lineStyle + .ThemeRiverSeries.select.labelLine.lineStyle + .ThemeRiverSeries.blur.labelLine.lineStyle + .ThemeRiverSeries.emphasis.labelLine.lineStyle + .ThemeRiverSeries.labelLine.lineStyle + .PictorialBarSeries.markLine.blur.lineStyle + .PictorialBarSeries.markLine.emphasis.lineStyle + .PictorialBarSeries.PictorialBarSeriesData.select.labelLine.lineStyle + .PictorialBarSeries.PictorialBarSeriesData.blur.labelLine.lineStyle + .PictorialBarSeries.PictorialBarSeriesData.emphasis.labelLine.lineStyle + .PictorialBarSeries.PictorialBarSeriesData.labelLine.lineStyle + .PictorialBarSeries.select.labelLine.lineStyle + .PictorialBarSeries.blur.labelLine.lineStyle + .PictorialBarSeries.emphasis.labelLine.lineStyle + .PictorialBarSeries.labelLine.lineStyle + .GaugeSeries.markLine.blur.lineStyle + .GaugeSeries.markLine.emphasis.lineStyle + .GaugeSeries.axisTick.lineStyle + .GaugeSeries.splitLine.lineStyle + .FunnelSeries.markLine.blur.lineStyle + .FunnelSeries.markLine.emphasis.lineStyle + .FunnelSeries.FunnelSeriesData.select.labelLine.lineStyle + .FunnelSeries.FunnelSeriesData.blur.labelLine.lineStyle + .FunnelSeries.FunnelSeriesData.emphasis.labelLine.lineStyle + .FunnelSeries.FunnelSeriesData.labelLine.lineStyle + .FunnelSeries.select.labelLine.lineStyle + .FunnelSeries.blur.labelLine.lineStyle + .FunnelSeries.emphasis.labelLine.lineStyle + .FunnelSeries.labelLine.lineStyle + .GraphSeries.markLine.blur.lineStyle + .GraphSeries.markLine.emphasis.lineStyle + .LinesSeries.markLine.blur.lineStyle + .LinesSeries.markLine.emphasis.lineStyle + .LinesSeries.LinesSeriesData.select.lineStyle + .LinesSeries.LinesSeriesData.blur.lineStyle + .LinesSeries.LinesSeriesData.emphasis.lineStyle + .LinesSeries.select.lineStyle + .LinesSeries.blur.lineStyle + .LinesSeries.emphasis.lineStyle + .ParallelSeries.ParallelSeriesData.emphasis.lineStyle + .ParallelSeries.ParallelSeriesData.lineStyle + .ParallelSeries.emphasis.lineStyle + .ParallelSeries.lineStyle + .MapSeries.markLine.blur.lineStyle + .MapSeries.markLine.emphasis.lineStyle + .MapSeries.MapSeriesData.select.labelLine.lineStyle + .MapSeries.MapSeriesData.emphasis.labelLine.lineStyle + .MapSeries.MapSeriesData.labelLine.lineStyle + .MapSeries.labelLine.lineStyle + .HeatmapSeries.markLine.blur.lineStyle + .HeatmapSeries.markLine.emphasis.lineStyle + .CandlestickSeries.markLine.blur.lineStyle + .CandlestickSeries.markLine.emphasis.lineStyle + .BoxplotSeries.markLine.blur.lineStyle + .BoxplotSeries.markLine.emphasis.lineStyle + .SunburstSeries.SunburstSeriesLevel.labelLine.lineStyle + .SunburstSeries.labelLine.lineStyle + .SunburstSeries.SunburstSeriesData.labelLine.lineStyle + .TreemapSeries.TreemapSeriesData.select.labelLine.lineStyle + .TreemapSeries.TreemapSeriesData.blur.labelLine.lineStyle + .TreemapSeries.TreemapSeriesData.emphasis.labelLine.lineStyle + .TreemapSeries.TreemapSeriesLevel.select.labelLine.lineStyle + .TreemapSeries.TreemapSeriesLevel.blur.labelLine.lineStyle + .TreemapSeries.TreemapSeriesLevel.emphasis.labelLine.lineStyle + .TreemapSeries.labelLine.lineStyle + .TreemapSeries.select.labelLine.lineStyle + .TreemapSeries.blur.labelLine.lineStyle + .TreemapSeries.emphasis.labelLine.lineStyle + .RadarSeries.RadarSeriesData.select.lineStyle + .RadarSeries.RadarSeriesData.blur.lineStyle + .RadarSeries.RadarSeriesData.emphasis.lineStyle + .RadarSeries.RadarSeriesData.lineStyle + .RadarSeries.select.lineStyle + .RadarSeries.blur.lineStyle + .RadarSeries.emphasis.lineStyle + .RadarSeries.lineStyle + .EffectScatterSeries.markLine.blur.lineStyle + .EffectScatterSeries.markLine.emphasis.lineStyle + .EffectScatterSeries.EffectScatterSeriesData.select.labelLine.lineStyle + .EffectScatterSeries.EffectScatterSeriesData.blur.labelLine.lineStyle + .EffectScatterSeries.EffectScatterSeriesData.emphasis.labelLine.lineStyle + .EffectScatterSeries.EffectScatterSeriesData.labelLine.lineStyle + .EffectScatterSeries.select.labelLine.lineStyle + .EffectScatterSeries.blur.labelLine.lineStyle + .EffectScatterSeries.emphasis.labelLine.lineStyle + .EffectScatterSeries.labelLine.lineStyle + .ScatterSeries.markLine.blur.lineStyle + .ScatterSeries.markLine.emphasis.lineStyle + .ScatterSeries.ScatterSeriesData.select.labelLine.lineStyle + .ScatterSeries.ScatterSeriesData.blur.labelLine.lineStyle + .ScatterSeries.ScatterSeriesData.emphasis.labelLine.lineStyle + .ScatterSeries.ScatterSeriesData.labelLine.lineStyle + .ScatterSeries.select.labelLine.lineStyle + .ScatterSeries.blur.labelLine.lineStyle + .ScatterSeries.emphasis.labelLine.lineStyle + .ScatterSeries.labelLine.lineStyle + .PieSeries.markLine.blur.lineStyle + .PieSeries.markLine.emphasis.lineStyle + .PieSeries.PieSeriesData.select.labelLine.lineStyle + .PieSeries.PieSeriesData.blur.labelLine.lineStyle + .PieSeries.PieSeriesData.emphasis.labelLine.lineStyle + .PieSeries.PieSeriesData.labelLine.lineStyle + .PieSeries.select.labelLine.lineStyle + .PieSeries.blur.labelLine.lineStyle + .PieSeries.emphasis.labelLine.lineStyle + .PieSeries.labelLine.lineStyle + .BarSeries.markLine.blur.lineStyle + .BarSeries.markLine.emphasis.lineStyle + .BarSeries.BarSeriesData.select.labelLine.lineStyle + .BarSeries.BarSeriesData.blur.labelLine.lineStyle + .BarSeries.BarSeriesData.emphasis.labelLine.lineStyle + .BarSeries.BarSeriesData.labelLine.lineStyle + .BarSeries.select.labelLine.lineStyle + .BarSeries.blur.labelLine.lineStyle + .BarSeries.emphasis.labelLine.lineStyle + .BarSeries.labelLine.lineStyle + .LineSeries.markLine.blur.lineStyle + .LineSeries.markLine.emphasis.lineStyle + .LineSeries.LineSeriesData.labelLine.lineStyle + .LineSeries.select.lineStyle + .LineSeries.select.labelLine.lineStyle + .LineSeries.blur.lineStyle + .LineSeries.blur.labelLine.lineStyle + .LineSeries.emphasis.lineStyle + .LineSeries.emphasis.labelLine.lineStyle + .LineSeries.lineStyle + .LineSeries.labelLine.lineStyle + .calendar.splitLine.lineStyle + .timeline.progress.lineStyle + .singleAxis.tooltip.axisPointer.lineStyle + .singleAxis.axisPointer.lineStyle + .singleAxis.minorSplitLine.lineStyle + .singleAxis.splitLine.lineStyle + .singleAxis.minorTick.lineStyle + .singleAxis.axisTick.lineStyle + .singleAxis.axisLine.lineStyle + .parallelAxis.minorTick.lineStyle + .parallelAxis.axisTick.lineStyle + .parallelAxis.axisLine.lineStyle + .parallel.parallelAxisDefault.minorTick.lineStyle + .parallel.parallelAxisDefault.axisTick.lineStyle + .parallel.parallelAxisDefault.axisLine.lineStyle + .axisPointer.lineStyle + .tooltip.axisPointer.lineStyle + .SliderDataZoom.selectedDataBackground.lineStyle + .SliderDataZoom.dataBackground.lineStyle + .radar.splitLine.lineStyle + .radar.axisTick.lineStyle + .radar.axisLine.lineStyle + .angleAxis.axisPointer.lineStyle + .angleAxis.minorSplitLine.lineStyle + .angleAxis.splitLine.lineStyle + .angleAxis.minorTick.lineStyle + .angleAxis.axisTick.lineStyle + .angleAxis.axisLine.lineStyle + .radiusAxis.axisPointer.lineStyle + .radiusAxis.minorSplitLine.lineStyle + .radiusAxis.splitLine.lineStyle + .radiusAxis.minorTick.lineStyle + .radiusAxis.axisTick.lineStyle + .radiusAxis.axisLine.lineStyle + .polar.tooltip.axisPointer.lineStyle + .yAxis.axisPointer.lineStyle + .yAxis.minorSplitLine.lineStyle + .yAxis.splitLine.lineStyle + .yAxis.minorTick.lineStyle + .yAxis.axisTick.lineStyle + .yAxis.axisLine.lineStyle + .xAxis.axisPointer.lineStyle + .xAxis.minorSplitLine.lineStyle + .xAxis.splitLine.lineStyle + .xAxis.minorTick.lineStyle + .xAxis.axisTick.lineStyle + .xAxis.axisLine.lineStyle + .grid.tooltip.axisPointer.lineStyle + +# cap,color,dashOffset,join,miterLimit,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,type,width + .timeline.lineStyle + +# cap,color,curveness,dashOffset,join,miterLimit,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,type,width + .PictorialBarSeries.markLine.lineStyle + .GaugeSeries.markLine.lineStyle + .FunnelSeries.markLine.lineStyle + .GraphSeries.markLine.lineStyle + .GraphSeries.GraphSeriesLink.select.lineStyle + .GraphSeries.GraphSeriesLink.blur.lineStyle + .GraphSeries.GraphSeriesLink.emphasis.lineStyle + .GraphSeries.GraphSeriesLink.lineStyle + .GraphSeries.select.lineStyle + .GraphSeries.blur.lineStyle + .GraphSeries.emphasis.lineStyle + .GraphSeries.lineStyle + .LinesSeries.markLine.lineStyle + .LinesSeries.LinesSeriesData.lineStyle + .LinesSeries.lineStyle + .MapSeries.markLine.lineStyle + .HeatmapSeries.markLine.lineStyle + .CandlestickSeries.markLine.lineStyle + .BoxplotSeries.markLine.lineStyle + .EffectScatterSeries.markLine.lineStyle + .ScatterSeries.markLine.lineStyle + .PieSeries.markLine.lineStyle + .BarSeries.markLine.lineStyle + .LineSeries.markLine.lineStyle + +# color,curveness,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,width + .TreeSeries.leaves.select.lineStyle + .TreeSeries.leaves.blur.lineStyle + .TreeSeries.leaves.emphasis.lineStyle + .TreeSeries.select.lineStyle + .TreeSeries.blur.lineStyle + .TreeSeries.emphasis.lineStyle + .TreeSeries.lineStyle + +# color,curveness,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .SankeySeries.SankeySeriesLink.select.lineStyle + .SankeySeries.SankeySeriesLink.blur.lineStyle + .SankeySeries.SankeySeriesLink.emphasis.lineStyle + .SankeySeries.SankeySeriesLink.lineStyle + .SankeySeries.select.lineStyle + .SankeySeries.blur.lineStyle + .SankeySeries.emphasis.lineStyle + .SankeySeries.lineStyle + .SankeySeries.SankeySeriesLevel.select.lineStyle + .SankeySeries.SankeySeriesLevel.blur.lineStyle + .SankeySeries.SankeySeriesLevel.emphasis.lineStyle + .SankeySeries.SankeySeriesLevel.lineStyle + +# color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,width + .GaugeSeries.axisLine.lineStyle + + +#selected: 1 (similarity: 1) +# + .legend.selected + + +#tooltip: 51 (similarity: 2,3,6,1,2,37) +# + .toolbox.tooltip + .legend.tooltip + +# axisPointer,backgroundColor,borderColor,borderWidth,extraCssText,formatter,padding,position,show,textStyle,trigger,valueFormatter + .singleAxis.tooltip + .polar.tooltip + .grid.tooltip + +# backgroundColor,borderColor,borderWidth,extraCssText,formatter,padding,position,show,textStyle + .parallelAxis.tooltip + .parallel.parallelAxisDefault.tooltip + .angleAxis.tooltip + .radiusAxis.tooltip + .yAxis.tooltip + .xAxis.tooltip + +# alwaysShowContent,appendTo,appendToBody,axisPointer,backgroundColor,borderColor,borderWidth,className,confine,enterable,extraCssText,formatter,hideDelay,order,padding,position,renderMode,show,showContent,showDelay,textStyle,transitionDuration,trigger,triggerOn,valueFormatter + .tooltip + +# backgroundColor,borderColor,borderWidth,extraCssText,formatter,padding,position,show,textStyle,valueFormatter + .geo.tooltip + .geo.geoRegion.tooltip + +# backgroundColor,borderColor,borderWidth,extraCssText,formatter,padding,position,textStyle,valueFormatter + .CustomSeries.tooltip + .CustomSeries.CustomSeriesData.tooltip + .ThemeRiverSeries.tooltip + .PictorialBarSeries.tooltip + .PictorialBarSeries.PictorialBarSeriesData.tooltip + .GaugeSeries.tooltip + .FunnelSeries.tooltip + .FunnelSeries.FunnelSeriesData.tooltip + .SankeySeries.tooltip + .SankeySeries.SankeySeriesData.tooltip + .GraphSeries.tooltip + .GraphSeries.GraphSeriesData.tooltip + .LinesSeries.tooltip + .LinesSeries.LinesSeriesData.tooltip + .MapSeries.tooltip + .MapSeries.MapSeriesData.tooltip + .HeatmapSeries.tooltip + .CandlestickSeries.tooltip + .CandlestickSeries.CandlestickSeriesData.tooltip + .BoxplotSeries.tooltip + .BoxplotSeries.BoxplotSeriesData.tooltip + .SunburstSeries.tooltip + .SunburstSeries.SunburstSeriesData.tooltip + .TreemapSeries.tooltip + .TreemapSeries.TreemapSeriesData.tooltip + .TreeSeries.tooltip + .RadarSeries.tooltip + .RadarSeries.RadarSeriesData.tooltip + .EffectScatterSeries.tooltip + .EffectScatterSeries.EffectScatterSeriesData.tooltip + .ScatterSeries.tooltip + .ScatterSeries.ScatterSeriesData.tooltip + .PieSeries.tooltip + .PieSeries.PieSeriesData.tooltip + .BarSeries.tooltip + .LineSeries.tooltip + .LineSeries.LineSeriesData.tooltip + + +#legendData: 1 (similarity: 1) +# icon,inactiveBorderColor,inactiveBorderWidth,inactiveColor,itemStyle,lineStyle,name,symbolRotate,textStyle + .legend.legendData + + +#pageIcons: 1 (similarity: 1) +# horizontal,vertical + .legend.pageIcons + + +#pageTextStyle: 1 (similarity: 1) +# color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .legend.pageTextStyle + + +#selectorLabel: 2 (similarity: 2) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,offset,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .legend.selectorLabel + .legend.emphasis.selectorLabel + + +#emphasis: 112 (similarity: 1,1,6,1,1,1,1,48,16,3,6,1,4,1,1,1,1,1,2,2,2,3,1,2,1,1,1,1,1) +# selectorLabel + .legend.emphasis + +# handleLabel,handleStyle,moveHandleStyle + .SliderDataZoom.emphasis + +# iconStyle + .toolbox.emphasis + .toolbox.feature.magicType.emphasis + .toolbox.feature.dataZoom.emphasis + .toolbox.feature.dataView.emphasis + .toolbox.feature.restore.emphasis + .toolbox.feature.saveAsImage.emphasis + +# disabled,focus,itemStyle,label + .geo.emphasis + +# itemStyle,label + .geo.geoRegion.emphasis + +# checkpointStyle,controlStyle,itemStyle,label + .timeline.emphasis + +# areaStyle,blurScope,disabled,endLabel,focus,itemStyle,label,labelLine,lineStyle,scale + .LineSeries.emphasis + +# disabled,itemStyle,label + .PictorialBarSeries.markArea.emphasis + .PictorialBarSeries.markPoint.markPointData.emphasis + .PictorialBarSeries.markPoint.emphasis + .GaugeSeries.markArea.emphasis + .GaugeSeries.markPoint.markPointData.emphasis + .GaugeSeries.markPoint.emphasis + .FunnelSeries.markArea.emphasis + .FunnelSeries.markPoint.markPointData.emphasis + .FunnelSeries.markPoint.emphasis + .SankeySeries.SankeySeriesData.emphasis + .GraphSeries.markArea.emphasis + .GraphSeries.markPoint.markPointData.emphasis + .GraphSeries.markPoint.emphasis + .GraphSeries.GraphSeriesData.emphasis + .GraphSeries.GraphSeriesCategory.emphasis + .LinesSeries.markArea.emphasis + .LinesSeries.markPoint.markPointData.emphasis + .LinesSeries.markPoint.emphasis + .MapSeries.markArea.emphasis + .MapSeries.markPoint.markPointData.emphasis + .MapSeries.markPoint.emphasis + .MapSeries.emphasis + .HeatmapSeries.markArea.emphasis + .HeatmapSeries.markPoint.markPointData.emphasis + .HeatmapSeries.markPoint.emphasis + .HeatmapSeries.HeatmapSeriesData.emphasis + .CandlestickSeries.markArea.emphasis + .CandlestickSeries.markPoint.markPointData.emphasis + .CandlestickSeries.markPoint.emphasis + .BoxplotSeries.markArea.emphasis + .BoxplotSeries.markPoint.markPointData.emphasis + .BoxplotSeries.markPoint.emphasis + .EffectScatterSeries.markArea.emphasis + .EffectScatterSeries.markPoint.markPointData.emphasis + .EffectScatterSeries.markPoint.emphasis + .ScatterSeries.markArea.emphasis + .ScatterSeries.markPoint.markPointData.emphasis + .ScatterSeries.markPoint.emphasis + .PieSeries.markArea.emphasis + .PieSeries.markPoint.markPointData.emphasis + .PieSeries.markPoint.emphasis + .BarSeries.markArea.emphasis + .BarSeries.markPoint.markPointData.emphasis + .BarSeries.markPoint.emphasis + .LineSeries.markArea.emphasis + .LineSeries.markPoint.markPointData.emphasis + .LineSeries.markPoint.emphasis + .LineSeries.LineSeriesData.emphasis + +# disabled,label,lineStyle + .PictorialBarSeries.markLine.emphasis + .GaugeSeries.markLine.emphasis + .FunnelSeries.markLine.emphasis + .GraphSeries.markLine.emphasis + .GraphSeries.GraphSeriesLink.emphasis + .LinesSeries.markLine.emphasis + .LinesSeries.LinesSeriesData.emphasis + .MapSeries.markLine.emphasis + .HeatmapSeries.markLine.emphasis + .CandlestickSeries.markLine.emphasis + .BoxplotSeries.markLine.emphasis + .EffectScatterSeries.markLine.emphasis + .ScatterSeries.markLine.emphasis + .PieSeries.markLine.emphasis + .BarSeries.markLine.emphasis + .LineSeries.markLine.emphasis + +# blurScope,disabled,focus,itemStyle,label,labelLine + .ThemeRiverSeries.emphasis + .FunnelSeries.emphasis + .BarSeries.emphasis + +# disabled,itemStyle,label,labelLine + .FunnelSeries.FunnelSeriesData.emphasis + .MapSeries.MapSeriesData.emphasis + .EffectScatterSeries.EffectScatterSeriesData.emphasis + .ScatterSeries.ScatterSeriesData.emphasis + .PieSeries.PieSeriesData.emphasis + .BarSeries.BarSeriesData.emphasis + +# blurScope,disabled,focus,itemStyle,label,labelLine,scale,scaleSize + .PieSeries.emphasis + +# blurScope,disabled,focus,itemStyle,label,labelLine,scale + .PictorialBarSeries.PictorialBarSeriesData.emphasis + .PictorialBarSeries.emphasis + .EffectScatterSeries.emphasis + .ScatterSeries.emphasis + +# areaStyle,blurScope,disabled,focus,itemStyle,label,lineStyle + .RadarSeries.emphasis + +# areaStyle,itemStyle,label,lineStyle + .RadarSeries.RadarSeriesData.emphasis + +# blurScope,disabled,focus,itemStyle,label,lineStyle + .TreeSeries.emphasis + +# disabled,itemStyle,label,lineStyle + .TreeSeries.leaves.emphasis + +# blurScope,disabled,focus,itemStyle,label,labelLine,upperLabel + .TreemapSeries.emphasis + +# itemStyle + .CustomSeries.CustomSeriesData.emphasis + .TreemapSeries.breadcrumb.emphasis + +# disabled,itemStyle,label,labelLine,upperLabel + .TreemapSeries.TreemapSeriesData.emphasis + .TreemapSeries.TreemapSeriesLevel.emphasis + +# blurScope,disabled,focus,itemStyle + .CandlestickSeries.emphasis + .BoxplotSeries.emphasis + +# disabled,itemStyle + .GaugeSeries.emphasis + .CandlestickSeries.CandlestickSeriesData.emphasis + .BoxplotSeries.BoxplotSeriesData.emphasis + +# blurScope,disabled,focus,itemStyle,label + .HeatmapSeries.emphasis + +# disabled,lineStyle + .ParallelSeries.ParallelSeriesData.emphasis + .ParallelSeries.emphasis + +# blurScope,disabled,focus,label,lineStyle + .LinesSeries.emphasis + +# blurScope,disabled,edgeLabel,focus,itemStyle,label,lineStyle,scale + .GraphSeries.emphasis + +# disabled,edgeLabel,itemStyle,label,lineStyle + .SankeySeries.SankeySeriesLevel.emphasis + +# blurScope,disabled,edgeLabel,focus,itemStyle,label,lineStyle + .SankeySeries.emphasis + +# disabled,edgeLabel,lineStyle + .SankeySeries.SankeySeriesLink.emphasis + + +#legend: 1 (similarity: 1) +# align,animation,animationDurationUpdate,backgroundColor,borderColor,borderRadius,borderWidth,bottom,data,emphasis,formatter,height,icon,id,inactiveBorderColor,inactiveBorderWidth,inactiveColor,itemGap,itemHeight,itemStyle,itemWidth,left,lineStyle,orient,padding,pageButtonGap,pageButtonItemGap,pageButtonPosition,pageFormatter,pageIconColor,pageIconInactiveColor,pageIcons,pageIconSize,pageTextStyle,right,scrollDataIndex,selected,selectedMode,selector,selectorButtonGap,selectorItemGap,selectorLabel,selectorPosition,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,symbolRotate,textStyle,tooltip,top,type,width,z,zlevel + .legend + + +#label: 314 (similarity: 10,161,1,2,13,10,40,42,1,3,1,3,2,1,1,2,3,7,6,1,1,3) +# backgroundColor,borderColor,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,margin,overflow,padding,precision,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .singleAxis.tooltip.axisPointer.label + .singleAxis.axisPointer.label + .axisPointer.label + .tooltip.axisPointer.label + .angleAxis.axisPointer.label + .radiusAxis.axisPointer.label + .polar.tooltip.axisPointer.label + .yAxis.axisPointer.label + .xAxis.axisPointer.label + .grid.tooltip.axisPointer.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .PictorialBarSeries.markArea.blur.label + .PictorialBarSeries.markArea.emphasis.label + .PictorialBarSeries.markArea.label + .PictorialBarSeries.markPoint.markPointData.emphasis.label + .PictorialBarSeries.markPoint.markPointData.label + .PictorialBarSeries.markPoint.blur.label + .PictorialBarSeries.markPoint.emphasis.label + .PictorialBarSeries.markPoint.label + .PictorialBarSeries.select.label + .PictorialBarSeries.blur.label + .PictorialBarSeries.emphasis.label + .GaugeSeries.markArea.blur.label + .GaugeSeries.markArea.emphasis.label + .GaugeSeries.markArea.label + .GaugeSeries.markPoint.markPointData.emphasis.label + .GaugeSeries.markPoint.markPointData.label + .GaugeSeries.markPoint.blur.label + .GaugeSeries.markPoint.emphasis.label + .GaugeSeries.markPoint.label + .FunnelSeries.markArea.blur.label + .FunnelSeries.markArea.emphasis.label + .FunnelSeries.markArea.label + .FunnelSeries.markPoint.markPointData.emphasis.label + .FunnelSeries.markPoint.markPointData.label + .FunnelSeries.markPoint.blur.label + .FunnelSeries.markPoint.emphasis.label + .FunnelSeries.markPoint.label + .SankeySeries.select.label + .SankeySeries.blur.label + .SankeySeries.emphasis.label + .SankeySeries.SankeySeriesLevel.label + .GraphSeries.markArea.blur.label + .GraphSeries.markArea.emphasis.label + .GraphSeries.markArea.label + .GraphSeries.markPoint.markPointData.emphasis.label + .GraphSeries.markPoint.markPointData.label + .GraphSeries.markPoint.blur.label + .GraphSeries.markPoint.emphasis.label + .GraphSeries.markPoint.label + .GraphSeries.GraphSeriesCategory.label + .GraphSeries.select.label + .GraphSeries.blur.label + .GraphSeries.emphasis.label + .LinesSeries.markArea.blur.label + .LinesSeries.markArea.emphasis.label + .LinesSeries.markArea.label + .LinesSeries.markPoint.markPointData.emphasis.label + .LinesSeries.markPoint.markPointData.label + .LinesSeries.markPoint.blur.label + .LinesSeries.markPoint.emphasis.label + .LinesSeries.markPoint.label + .MapSeries.markArea.blur.label + .MapSeries.markArea.emphasis.label + .MapSeries.markArea.label + .MapSeries.markPoint.markPointData.emphasis.label + .MapSeries.markPoint.markPointData.label + .MapSeries.markPoint.blur.label + .MapSeries.markPoint.emphasis.label + .MapSeries.markPoint.label + .MapSeries.select.label + .MapSeries.emphasis.label + .HeatmapSeries.markArea.blur.label + .HeatmapSeries.markArea.emphasis.label + .HeatmapSeries.markArea.label + .HeatmapSeries.markPoint.markPointData.emphasis.label + .HeatmapSeries.markPoint.markPointData.label + .HeatmapSeries.markPoint.blur.label + .HeatmapSeries.markPoint.emphasis.label + .HeatmapSeries.markPoint.label + .CandlestickSeries.markArea.blur.label + .CandlestickSeries.markArea.emphasis.label + .CandlestickSeries.markArea.label + .CandlestickSeries.markPoint.markPointData.emphasis.label + .CandlestickSeries.markPoint.markPointData.label + .CandlestickSeries.markPoint.blur.label + .CandlestickSeries.markPoint.emphasis.label + .CandlestickSeries.markPoint.label + .BoxplotSeries.markArea.blur.label + .BoxplotSeries.markArea.emphasis.label + .BoxplotSeries.markArea.label + .BoxplotSeries.markPoint.markPointData.emphasis.label + .BoxplotSeries.markPoint.markPointData.label + .BoxplotSeries.markPoint.blur.label + .BoxplotSeries.markPoint.emphasis.label + .BoxplotSeries.markPoint.label + .TreemapSeries.TreemapSeriesData.select.label + .TreemapSeries.TreemapSeriesData.blur.label + .TreemapSeries.TreemapSeriesData.emphasis.label + .TreemapSeries.TreemapSeriesLevel.select.label + .TreemapSeries.TreemapSeriesLevel.blur.label + .TreemapSeries.TreemapSeriesLevel.emphasis.label + .TreemapSeries.select.label + .TreemapSeries.blur.label + .TreemapSeries.emphasis.label + .TreeSeries.leaves.label + .TreeSeries.select.label + .TreeSeries.blur.label + .TreeSeries.emphasis.label + .RadarSeries.select.label + .RadarSeries.blur.label + .RadarSeries.emphasis.label + .EffectScatterSeries.markArea.blur.label + .EffectScatterSeries.markArea.emphasis.label + .EffectScatterSeries.markArea.label + .EffectScatterSeries.markPoint.markPointData.emphasis.label + .EffectScatterSeries.markPoint.markPointData.label + .EffectScatterSeries.markPoint.blur.label + .EffectScatterSeries.markPoint.emphasis.label + .EffectScatterSeries.markPoint.label + .EffectScatterSeries.select.label + .EffectScatterSeries.blur.label + .EffectScatterSeries.emphasis.label + .ScatterSeries.markArea.blur.label + .ScatterSeries.markArea.emphasis.label + .ScatterSeries.markArea.label + .ScatterSeries.markPoint.markPointData.emphasis.label + .ScatterSeries.markPoint.markPointData.label + .ScatterSeries.markPoint.blur.label + .ScatterSeries.markPoint.emphasis.label + .ScatterSeries.markPoint.label + .ScatterSeries.select.label + .ScatterSeries.blur.label + .ScatterSeries.emphasis.label + .PieSeries.markArea.blur.label + .PieSeries.markArea.emphasis.label + .PieSeries.markArea.label + .PieSeries.markPoint.markPointData.emphasis.label + .PieSeries.markPoint.markPointData.label + .PieSeries.markPoint.blur.label + .PieSeries.markPoint.emphasis.label + .PieSeries.markPoint.label + .BarSeries.markArea.blur.label + .BarSeries.markArea.emphasis.label + .BarSeries.markArea.label + .BarSeries.markPoint.markPointData.emphasis.label + .BarSeries.markPoint.markPointData.label + .BarSeries.markPoint.blur.label + .BarSeries.markPoint.emphasis.label + .BarSeries.markPoint.label + .BarSeries.select.label + .BarSeries.blur.label + .BarSeries.emphasis.label + .LineSeries.markArea.blur.label + .LineSeries.markArea.emphasis.label + .LineSeries.markArea.label + .LineSeries.markPoint.markPointData.emphasis.label + .LineSeries.markPoint.markPointData.label + .LineSeries.markPoint.blur.label + .LineSeries.markPoint.emphasis.label + .LineSeries.markPoint.label + .LineSeries.select.label + .LineSeries.blur.label + .LineSeries.emphasis.label + .geo.geoRegion.blur.label + .geo.geoRegion.select.label + .geo.geoRegion.emphasis.label + .geo.geoRegion.label + .geo.blur.label + .geo.select.label + .geo.emphasis.label + .geo.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,interval,lineHeight,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .timeline.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,interval,lineHeight,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .timeline.emphasis.label + .timeline.progress.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minMargin,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .PictorialBarSeries.label + .SankeySeries.label + .GraphSeries.label + .MapSeries.label + .TreemapSeries.TreemapSeriesData.label + .TreemapSeries.TreemapSeriesLevel.label + .TreemapSeries.label + .TreeSeries.label + .RadarSeries.label + .EffectScatterSeries.label + .ScatterSeries.label + .BarSeries.label + .LineSeries.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,minMargin,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .PictorialBarSeries.PictorialBarSeriesData.label + .SankeySeries.SankeySeriesData.label + .GraphSeries.GraphSeriesData.label + .HeatmapSeries.HeatmapSeriesData.label + .HeatmapSeries.label + .RadarSeries.RadarSeriesData.label + .EffectScatterSeries.EffectScatterSeriesData.label + .ScatterSeries.ScatterSeriesData.label + .BarSeries.BarSeriesData.label + .LineSeries.LineSeriesData.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .PictorialBarSeries.PictorialBarSeriesData.select.label + .PictorialBarSeries.PictorialBarSeriesData.blur.label + .PictorialBarSeries.PictorialBarSeriesData.emphasis.label + .SankeySeries.SankeySeriesData.select.label + .SankeySeries.SankeySeriesData.blur.label + .SankeySeries.SankeySeriesData.emphasis.label + .SankeySeries.SankeySeriesLevel.select.label + .SankeySeries.SankeySeriesLevel.blur.label + .SankeySeries.SankeySeriesLevel.emphasis.label + .GraphSeries.GraphSeriesLink.select.label + .GraphSeries.GraphSeriesLink.blur.label + .GraphSeries.GraphSeriesLink.emphasis.label + .GraphSeries.GraphSeriesData.select.label + .GraphSeries.GraphSeriesData.blur.label + .GraphSeries.GraphSeriesData.emphasis.label + .GraphSeries.GraphSeriesCategory.select.label + .GraphSeries.GraphSeriesCategory.blur.label + .GraphSeries.GraphSeriesCategory.emphasis.label + .HeatmapSeries.HeatmapSeriesData.emphasis.label + .HeatmapSeries.select.label + .HeatmapSeries.blur.label + .HeatmapSeries.emphasis.label + .TreeSeries.leaves.select.label + .TreeSeries.leaves.blur.label + .TreeSeries.leaves.emphasis.label + .RadarSeries.RadarSeriesData.select.label + .RadarSeries.RadarSeriesData.blur.label + .RadarSeries.RadarSeriesData.emphasis.label + .EffectScatterSeries.EffectScatterSeriesData.select.label + .EffectScatterSeries.EffectScatterSeriesData.blur.label + .EffectScatterSeries.EffectScatterSeriesData.emphasis.label + .ScatterSeries.ScatterSeriesData.select.label + .ScatterSeries.ScatterSeriesData.blur.label + .ScatterSeries.ScatterSeriesData.emphasis.label + .BarSeries.BarSeriesData.select.label + .BarSeries.BarSeriesData.blur.label + .BarSeries.BarSeriesData.emphasis.label + .LineSeries.LineSeriesData.select.label + .LineSeries.LineSeriesData.blur.label + .LineSeries.LineSeriesData.emphasis.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .PictorialBarSeries.markLine.blur.label + .PictorialBarSeries.markLine.emphasis.label + .PictorialBarSeries.markLine.label + .GaugeSeries.markLine.blur.label + .GaugeSeries.markLine.emphasis.label + .GaugeSeries.markLine.label + .FunnelSeries.markLine.blur.label + .FunnelSeries.markLine.emphasis.label + .FunnelSeries.markLine.label + .GraphSeries.markLine.blur.label + .GraphSeries.markLine.emphasis.label + .GraphSeries.markLine.label + .LinesSeries.markLine.blur.label + .LinesSeries.markLine.emphasis.label + .LinesSeries.markLine.label + .MapSeries.markLine.blur.label + .MapSeries.markLine.emphasis.label + .MapSeries.markLine.label + .HeatmapSeries.markLine.blur.label + .HeatmapSeries.markLine.emphasis.label + .HeatmapSeries.markLine.label + .CandlestickSeries.markLine.blur.label + .CandlestickSeries.markLine.emphasis.label + .CandlestickSeries.markLine.label + .BoxplotSeries.markLine.blur.label + .BoxplotSeries.markLine.emphasis.label + .BoxplotSeries.markLine.label + .EffectScatterSeries.markLine.blur.label + .EffectScatterSeries.markLine.emphasis.label + .EffectScatterSeries.markLine.label + .ScatterSeries.markLine.blur.label + .ScatterSeries.markLine.emphasis.label + .ScatterSeries.markLine.label + .PieSeries.markLine.blur.label + .PieSeries.markLine.emphasis.label + .PieSeries.markLine.label + .BarSeries.markLine.blur.label + .BarSeries.markLine.emphasis.label + .BarSeries.markLine.label + .LineSeries.markLine.blur.label + .LineSeries.markLine.emphasis.label + .LineSeries.markLine.label + +# alignTo,backgroundColor,bleedMargin,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distanceToLabelLine,edgeDistance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minMargin,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .PieSeries.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .PieSeries.select.label + .PieSeries.blur.label + .PieSeries.emphasis.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,minMargin,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .PieSeries.PieSeriesData.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .PieSeries.PieSeriesData.select.label + .PieSeries.PieSeriesData.blur.label + .PieSeries.PieSeriesData.emphasis.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minAngle,minMargin,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .SunburstSeries.label + .SunburstSeries.SunburstSeriesData.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minAngle,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .SunburstSeries.SunburstSeriesLevel.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minMargin,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .MapSeries.MapSeriesData.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .MapSeries.MapSeriesData.select.label + .MapSeries.MapSeriesData.emphasis.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minMargin,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .FunnelSeries.label + .LinesSeries.LinesSeriesData.label + .LinesSeries.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .GraphSeries.GraphSeriesLink.label + .LinesSeries.LinesSeriesData.select.label + .LinesSeries.LinesSeriesData.blur.label + .LinesSeries.LinesSeriesData.emphasis.label + .LinesSeries.select.label + .LinesSeries.blur.label + .LinesSeries.emphasis.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .FunnelSeries.FunnelSeriesData.select.label + .FunnelSeries.FunnelSeriesData.blur.label + .FunnelSeries.FunnelSeriesData.emphasis.label + .FunnelSeries.select.label + .FunnelSeries.blur.label + .FunnelSeries.emphasis.label + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,minMargin,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .FunnelSeries.FunnelSeriesData.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,minMargin,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .ThemeRiverSeries.label + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .ThemeRiverSeries.select.label + .ThemeRiverSeries.blur.label + .ThemeRiverSeries.emphasis.label + + +#shadowStyle: 10 (similarity: 10) +# color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .singleAxis.tooltip.axisPointer.shadowStyle + .singleAxis.axisPointer.shadowStyle + .axisPointer.shadowStyle + .tooltip.axisPointer.shadowStyle + .angleAxis.axisPointer.shadowStyle + .radiusAxis.axisPointer.shadowStyle + .polar.tooltip.axisPointer.shadowStyle + .yAxis.axisPointer.shadowStyle + .xAxis.axisPointer.shadowStyle + .grid.tooltip.axisPointer.shadowStyle + + +#crossStyle: 4 (similarity: 4) +# cap,color,dashOffset,join,miterLimit,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,type,width + .singleAxis.tooltip.axisPointer.crossStyle + .tooltip.axisPointer.crossStyle + .polar.tooltip.axisPointer.crossStyle + .grid.tooltip.axisPointer.crossStyle + + +#axisPointer: 10 (similarity: 4,5,1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axis,crossStyle,label,lineStyle,shadowStyle,snap,type,z + .singleAxis.tooltip.axisPointer + .tooltip.axisPointer + .polar.tooltip.axisPointer + .grid.tooltip.axisPointer + +# handle,label,lineStyle,shadowStyle,show,snap,status,triggerEmphasis,triggerTooltip,type,value,z + .singleAxis.axisPointer + .angleAxis.axisPointer + .radiusAxis.axisPointer + .yAxis.axisPointer + .xAxis.axisPointer + +# handle,id,label,lineStyle,link,shadowStyle,show,snap,status,triggerEmphasis,triggerOn,triggerTooltip,type,value,z + .axisPointer + + +#grid: 1 (similarity: 1) +# backgroundColor,borderColor,borderWidth,bottom,containLabel,height,id,left,right,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,tooltip,top,width,z,zlevel + .grid + + +#nameTextStyle: 6 (similarity: 6) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .singleAxis.nameTextStyle + .parallelAxis.nameTextStyle + .parallel.parallelAxisDefault.nameTextStyle + .radiusAxis.nameTextStyle + .yAxis.nameTextStyle + .xAxis.nameTextStyle + + +#nameTruncate: 6 (similarity: 6) +# ellipsis,maxWidth + .singleAxis.nameTruncate + .parallelAxis.nameTruncate + .parallel.parallelAxisDefault.nameTruncate + .radiusAxis.nameTruncate + .yAxis.nameTruncate + .xAxis.nameTruncate + + +#axisLine: 9 (similarity: 2,6,1) +# lineStyle,onZero,onZeroAxisIndex,show,symbol,symbolOffset,symbolSize + .yAxis.axisLine + .xAxis.axisLine + +# lineStyle,show,symbol,symbolOffset,symbolSize + .singleAxis.axisLine + .parallelAxis.axisLine + .parallel.parallelAxisDefault.axisLine + .radar.axisLine + .angleAxis.axisLine + .radiusAxis.axisLine + +# lineStyle,roundCap,show + .GaugeSeries.axisLine + + +#axisTick: 9 (similarity: 7,1,1) +# alignWithLabel,customValues,inside,interval,length,lineStyle,show + .singleAxis.axisTick + .parallelAxis.axisTick + .parallel.parallelAxisDefault.axisTick + .angleAxis.axisTick + .radiusAxis.axisTick + .yAxis.axisTick + .xAxis.axisTick + +# customValues,length,lineStyle,show + .radar.axisTick + +# distance,length,lineStyle,show,splitNumber + .GaugeSeries.axisTick + + +#minorTick: 7 (similarity: 7) +# length,lineStyle,show,splitNumber + .singleAxis.minorTick + .parallelAxis.minorTick + .parallel.parallelAxisDefault.minorTick + .angleAxis.minorTick + .radiusAxis.minorTick + .yAxis.minorTick + .xAxis.minorTick + + +#axisLabel: 9 (similarity: 1,1,4,1,1,1) +# align,alignMaxLabel,alignMinLabel,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,customValues,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,hideOverlap,inside,interval,lineHeight,margin,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,showMaxLabel,showMinLabel,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .xAxis.axisLabel + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,customValues,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,hideOverlap,inside,interval,lineHeight,margin,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,showMaxLabel,showMinLabel,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,verticalAlignMaxLabel,verticalAlignMinLabel,width + .yAxis.axisLabel + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,customValues,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,hideOverlap,inside,interval,lineHeight,margin,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,showMaxLabel,showMinLabel,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .singleAxis.axisLabel + .parallelAxis.axisLabel + .parallel.parallelAxisDefault.axisLabel + .radiusAxis.axisLabel + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,customValues,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,hideOverlap,inside,interval,lineHeight,margin,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,showMaxLabel,showMinLabel,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .angleAxis.axisLabel + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,customValues,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,hideOverlap,lineHeight,margin,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,showMaxLabel,showMinLabel,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .radar.axisLabel + +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .GaugeSeries.axisLabel + + +#splitLine: 8 (similarity: 5,1,1,1) +# interval,lineStyle,show,showMaxLabel,showMinLine + .singleAxis.splitLine + .angleAxis.splitLine + .radiusAxis.splitLine + .yAxis.splitLine + .xAxis.splitLine + +# lineStyle,show,showMaxLabel,showMinLine + .radar.splitLine + +# lineStyle,show + .calendar.splitLine + +# distance,length,lineStyle,show + .GaugeSeries.splitLine + + +#minorSplitLine: 5 (similarity: 5) +# lineStyle,show + .singleAxis.minorSplitLine + .angleAxis.minorSplitLine + .radiusAxis.minorSplitLine + .yAxis.minorSplitLine + .xAxis.minorSplitLine + + +#areaStyle: 20 (similarity: 19,1) +# color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .RadarSeries.RadarSeriesData.select.areaStyle + .RadarSeries.RadarSeriesData.blur.areaStyle + .RadarSeries.RadarSeriesData.emphasis.areaStyle + .RadarSeries.RadarSeriesData.areaStyle + .RadarSeries.select.areaStyle + .RadarSeries.blur.areaStyle + .RadarSeries.emphasis.areaStyle + .RadarSeries.areaStyle + .LineSeries.select.areaStyle + .LineSeries.blur.areaStyle + .LineSeries.emphasis.areaStyle + .singleAxis.splitArea.areaStyle + .SliderDataZoom.selectedDataBackground.areaStyle + .SliderDataZoom.dataBackground.areaStyle + .radar.splitArea.areaStyle + .angleAxis.splitArea.areaStyle + .radiusAxis.splitArea.areaStyle + .yAxis.splitArea.areaStyle + .xAxis.splitArea.areaStyle + +# color,opacity,origin,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .LineSeries.areaStyle + + +#splitArea: 6 (similarity: 5,1) +# areaStyle,interval,show + .singleAxis.splitArea + .angleAxis.splitArea + .radiusAxis.splitArea + .yAxis.splitArea + .xAxis.splitArea + +# areaStyle,show + .radar.splitArea + + +#handle: 6 (similarity: 6) +# color,icon,margin,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,size,throttle + .singleAxis.axisPointer.handle + .axisPointer.handle + .angleAxis.axisPointer.handle + .radiusAxis.axisPointer.handle + .yAxis.axisPointer.handle + .xAxis.axisPointer.handle + + +#xAxis: 1 (similarity: 1) +# alignTicks,animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisPointer,axisTick,boundaryGap,data,gridIndex,id,interval,inverse,logBase,max,maxInterval,min,minInterval,minorSplitLine,minorTick,name,nameGap,nameLocation,nameRotate,nameTextStyle,nameTruncate,offset,position,scale,show,silent,splitArea,splitLine,splitNumber,startValue,tooltip,triggerEvent,type,z,zlevel + .xAxis + + +#yAxis: 1 (similarity: 1) +# alignTicks,animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisPointer,axisTick,boundaryGap,data,gridIndex,id,interval,inverse,logBase,max,maxInterval,min,minInterval,minorSplitLine,minorTick,name,nameGap,nameLocation,nameRotate,nameTextStyle,nameTruncate,offset,position,scale,show,silent,splitArea,splitLine,splitNumber,startValue,tooltip,triggerEvent,type,z,zlevel + .yAxis + + +#polar: 1 (similarity: 1) +# center,id,radius,tooltip,z,zlevel + .polar + + +#radiusAxis: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisPointer,axisTick,boundaryGap,data,id,interval,inverse,logBase,max,maxInterval,min,minInterval,minorSplitLine,minorTick,name,nameGap,nameLocation,nameRotate,nameTextStyle,nameTruncate,polarIndex,scale,silent,splitArea,splitLine,splitNumber,startValue,tooltip,triggerEvent,type,z,zlevel + .radiusAxis + + +#angleAxis: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisPointer,axisTick,boundaryGap,clockwise,data,endAngle,id,interval,logBase,max,maxInterval,min,minInterval,minorSplitLine,minorTick,polarIndex,scale,silent,splitArea,splitLine,splitNumber,startAngle,startValue,tooltip,triggerEvent,type,z,zlevel + .angleAxis + + +#axisName: 1 (similarity: 1) +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,width + .radar.axisName + + +#radarIndicator: 1 (similarity: 1) +# color,max,min,name + .radar.radarIndicator + + +#radar: 1 (similarity: 1) +# axisLabel,axisLine,axisName,axisTick,center,id,indicator,nameGap,radius,scale,shape,silent,splitArea,splitLine,splitNumber,startAngle,triggerEvent,z,zlevel + .radar + + +#InsideDataZoom: 1 (similarity: 1) +# angleAxisIndex,disabled,end,endValue,filterMode,id,maxSpan,maxValueSpan,minSpan,minValueSpan,moveOnMouseMove,moveOnMouseWheel,orient,preventDefaultMouseMove,radiusAxisIndex,rangeMode,start,startValue,throttle,type,xAxisIndex,yAxisIndex,zoomLock,zoomOnMouseWheel + .InsideDataZoom + + +#dataBackground: 1 (similarity: 1) +# areaStyle,lineStyle + .SliderDataZoom.dataBackground + + +#selectedDataBackground: 1 (similarity: 1) +# areaStyle,lineStyle + .SliderDataZoom.selectedDataBackground + + +#handleStyle: 3 (similarity: 3) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .ContinuousVisualMap.handleStyle + .SliderDataZoom.emphasis.handleStyle + .SliderDataZoom.handleStyle + + +#handleLabel: 2 (similarity: 2) +# show + .SliderDataZoom.emphasis.handleLabel + .SliderDataZoom.handleLabel + + +#moveHandleStyle: 2 (similarity: 2) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .SliderDataZoom.emphasis.moveHandleStyle + .SliderDataZoom.moveHandleStyle + + +#brushStyle: 3 (similarity: 2,1) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .toolbox.feature.dataZoom.brushStyle + .SliderDataZoom.brushStyle + +# + .brush.brushStyle + + +#SliderDataZoom: 1 (similarity: 1) +# angleAxisIndex,backgroundColor,borderColor,borderRadius,bottom,brushSelect,brushStyle,dataBackground,emphasis,end,endValue,fillerColor,filterMode,handleIcon,handleLabel,handleSize,handleStyle,height,id,labelFormatter,labelPrecision,left,maxSpan,maxValueSpan,minSpan,minValueSpan,moveHandleIcon,moveHandleSize,moveHandleStyle,orient,radiusAxisIndex,rangeMode,realtime,right,selectedDataBackground,show,showDataShadow,showDetail,start,startValue,textStyle,throttle,top,type,width,xAxisIndex,yAxisIndex,z,zlevel,zoomLock + .SliderDataZoom + + +#inRange: 4 (similarity: 4) +# + .PiecewiseVisualMap.controller.inRange + .PiecewiseVisualMap.inRange + .ContinuousVisualMap.controller.inRange + .ContinuousVisualMap.inRange + + +#outOfRange: 4 (similarity: 4) +# + .PiecewiseVisualMap.controller.outOfRange + .PiecewiseVisualMap.outOfRange + .ContinuousVisualMap.controller.outOfRange + .ContinuousVisualMap.outOfRange + + +#controller: 2 (similarity: 2) +# inRange,outOfRange + .PiecewiseVisualMap.controller + .ContinuousVisualMap.controller + + +#indicatorStyle: 1 (similarity: 1) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .ContinuousVisualMap.indicatorStyle + + +#ContinuousVisualMap: 1 (similarity: 1) +# align,backgroundColor,borderColor,borderWidth,bottom,calculable,color,controller,dimension,formatter,handleIcon,handleSize,handleStyle,hoverLink,id,indicatorIcon,indicatorSize,indicatorStyle,inRange,inverse,itemHeight,itemWidth,left,max,min,orient,outOfRange,padding,precision,range,realtime,right,seriesIndex,show,text,textGap,textStyle,top,type,z,zlevel + .ContinuousVisualMap + + +#PiecewiseVisualMap: 1 (similarity: 1) +# align,backgroundColor,borderColor,borderWidth,bottom,categories,color,controller,dimension,formatter,hoverLink,id,inRange,inverse,itemGap,itemHeight,itemSymbol,itemWidth,left,max,maxOpen,min,minOpen,orient,outOfRange,padding,pieces,precision,right,selectedMode,seriesIndex,show,showLabel,splitNumber,text,textGap,textStyle,top,type,z,zlevel + .PiecewiseVisualMap + + +#iconStyle: 12 (similarity: 6,6) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .toolbox.iconStyle + .toolbox.feature.magicType.iconStyle + .toolbox.feature.dataZoom.iconStyle + .toolbox.feature.dataView.iconStyle + .toolbox.feature.restore.iconStyle + .toolbox.feature.saveAsImage.iconStyle + +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,textAlign,textBackgroundColor,textBorderRadius,textFill,textPadding,textPosition + .toolbox.emphasis.iconStyle + .toolbox.feature.magicType.emphasis.iconStyle + .toolbox.feature.dataZoom.emphasis.iconStyle + .toolbox.feature.dataView.emphasis.iconStyle + .toolbox.feature.restore.emphasis.iconStyle + .toolbox.feature.saveAsImage.emphasis.iconStyle + + +#saveAsImage: 1 (similarity: 1) +# backgroundColor,connectedBackgroundColor,emphasis,excludeComponents,icon,iconStyle,name,pixelRatio,show,title,type + .toolbox.feature.saveAsImage + + +#restore: 1 (similarity: 1) +# emphasis,icon,iconStyle,show,title + .toolbox.feature.restore + + +#dataView: 1 (similarity: 1) +# backgroundColor,buttonColor,buttonTextColor,contentToOption,emphasis,icon,iconStyle,lang,optionToContent,readOnly,show,textareaBorderColor,textareaColor,textColor,title + .toolbox.feature.dataView + + +#dataZoom: 1 (similarity: 1) +# brushStyle,emphasis,filterMode,icon,iconStyle,show,title,xAxisIndex,yAxisIndex + .toolbox.feature.dataZoom + + +#line: 1 (similarity: 1) +# + .toolbox.feature.magicType.option.line + + +#bar: 1 (similarity: 1) +# + .toolbox.feature.magicType.option.bar + + +#stack: 1 (similarity: 1) +# + .toolbox.feature.magicType.option.stack + + +#option: 2 (similarity: 1,1) +# bar,line,stack + .toolbox.feature.magicType.option + +# + .Media.option + + +#seriesIndex: 1 (similarity: 1) +# bar,line + .toolbox.feature.magicType.seriesIndex + + +#magicType: 1 (similarity: 1) +# emphasis,icon,iconStyle,option,seriesIndex,show,title,type + .toolbox.feature.magicType + + +#brush: 2 (similarity: 1,1) +# icon,title,type + .toolbox.feature.brush + +# brushLink,brushMode,brushStyle,brushType,geoIndex,id,inBrush,outOfBrush,removeOnClick,seriesIndex,throttleDelay,throttleType,toolbox,transformable,xAxisIndex,yAxisIndex,z + .brush + + +#feature: 1 (similarity: 1) +# brush,dataView,dataZoom,magicType,restore,saveAsImage + .toolbox.feature + + +#toolbox: 1 (similarity: 1) +# bottom,emphasis,feature,height,iconStyle,id,itemGap,itemSize,left,orient,right,show,showTitle,tooltip,top,width,z,zlevel + .toolbox + + +#inBrush: 1 (similarity: 1) +# + .brush.inBrush + + +#outOfBrush: 1 (similarity: 1) +# + .brush.outOfBrush + + +#projection: 2 (similarity: 2) +# project,stream,unproject + .MapSeries.projection + .geo.projection + + +#scaleLimit: 4 (similarity: 4) +# max,min + .GraphSeries.scaleLimit + .MapSeries.scaleLimit + .TreemapSeries.scaleLimit + .geo.scaleLimit + + +#nameMap: 2 (similarity: 2) +# + .MapSeries.nameMap + .geo.nameMap + + +#select: 41 (similarity: 7,1,1,14,2,2,3,4,3,3,1) +# disabled,itemStyle,label + .SankeySeries.SankeySeriesData.select + .GraphSeries.GraphSeriesData.select + .GraphSeries.GraphSeriesCategory.select + .MapSeries.select + .HeatmapSeries.select + .LineSeries.LineSeriesData.select + .geo.select + +# itemStyle,label + .geo.geoRegion.select + +# areaStyle,disabled,endLabel,itemStyle,label,labelLine,lineStyle + .LineSeries.select + +# disabled,itemStyle,label,labelLine + .ThemeRiverSeries.select + .PictorialBarSeries.PictorialBarSeriesData.select + .PictorialBarSeries.select + .FunnelSeries.FunnelSeriesData.select + .FunnelSeries.select + .MapSeries.MapSeriesData.select + .EffectScatterSeries.EffectScatterSeriesData.select + .EffectScatterSeries.select + .ScatterSeries.ScatterSeriesData.select + .ScatterSeries.select + .PieSeries.PieSeriesData.select + .PieSeries.select + .BarSeries.BarSeriesData.select + .BarSeries.select + +# areaStyle,disabled,itemStyle,label,lineStyle + .RadarSeries.RadarSeriesData.select + .RadarSeries.select + +# disabled,itemStyle,label,lineStyle + .TreeSeries.leaves.select + .TreeSeries.select + +# disabled,itemStyle,label,labelLine,upperLabel + .TreemapSeries.TreemapSeriesData.select + .TreemapSeries.TreemapSeriesLevel.select + .TreemapSeries.select + +# disabled,itemStyle + .CandlestickSeries.CandlestickSeriesData.select + .CandlestickSeries.select + .BoxplotSeries.BoxplotSeriesData.select + .BoxplotSeries.select + +# disabled,label,lineStyle + .GraphSeries.GraphSeriesLink.select + .LinesSeries.LinesSeriesData.select + .LinesSeries.select + +# disabled,edgeLabel,itemStyle,label,lineStyle + .SankeySeries.select + .SankeySeries.SankeySeriesLevel.select + .GraphSeries.select + +# disabled,edgeLabel,lineStyle + .SankeySeries.SankeySeriesLink.select + + +#blur: 81 (similarity: 35,1,17,13,2,2,3,4,3,1) +# itemStyle,label + .PictorialBarSeries.markArea.blur + .PictorialBarSeries.markPoint.blur + .GaugeSeries.markArea.blur + .GaugeSeries.markPoint.blur + .FunnelSeries.markArea.blur + .FunnelSeries.markPoint.blur + .SankeySeries.SankeySeriesData.blur + .GraphSeries.markArea.blur + .GraphSeries.markPoint.blur + .GraphSeries.GraphSeriesData.blur + .GraphSeries.GraphSeriesCategory.blur + .LinesSeries.markArea.blur + .LinesSeries.markPoint.blur + .MapSeries.markArea.blur + .MapSeries.markPoint.blur + .HeatmapSeries.markArea.blur + .HeatmapSeries.markPoint.blur + .HeatmapSeries.blur + .CandlestickSeries.markArea.blur + .CandlestickSeries.markPoint.blur + .BoxplotSeries.markArea.blur + .BoxplotSeries.markPoint.blur + .EffectScatterSeries.markArea.blur + .EffectScatterSeries.markPoint.blur + .ScatterSeries.markArea.blur + .ScatterSeries.markPoint.blur + .PieSeries.markArea.blur + .PieSeries.markPoint.blur + .BarSeries.markArea.blur + .BarSeries.markPoint.blur + .LineSeries.markArea.blur + .LineSeries.markPoint.blur + .LineSeries.LineSeriesData.blur + .geo.geoRegion.blur + .geo.blur + +# areaStyle,endLabel,itemStyle,label,labelLine,lineStyle + .LineSeries.blur + +# label,lineStyle + .PictorialBarSeries.markLine.blur + .GaugeSeries.markLine.blur + .FunnelSeries.markLine.blur + .GraphSeries.markLine.blur + .GraphSeries.GraphSeriesLink.blur + .LinesSeries.markLine.blur + .LinesSeries.LinesSeriesData.blur + .LinesSeries.blur + .MapSeries.markLine.blur + .HeatmapSeries.markLine.blur + .CandlestickSeries.markLine.blur + .BoxplotSeries.markLine.blur + .EffectScatterSeries.markLine.blur + .ScatterSeries.markLine.blur + .PieSeries.markLine.blur + .BarSeries.markLine.blur + .LineSeries.markLine.blur + +# itemStyle,label,labelLine + .ThemeRiverSeries.blur + .PictorialBarSeries.PictorialBarSeriesData.blur + .PictorialBarSeries.blur + .FunnelSeries.FunnelSeriesData.blur + .FunnelSeries.blur + .EffectScatterSeries.EffectScatterSeriesData.blur + .EffectScatterSeries.blur + .ScatterSeries.ScatterSeriesData.blur + .ScatterSeries.blur + .PieSeries.PieSeriesData.blur + .PieSeries.blur + .BarSeries.BarSeriesData.blur + .BarSeries.blur + +# areaStyle,itemStyle,label,lineStyle + .RadarSeries.RadarSeriesData.blur + .RadarSeries.blur + +# itemStyle,label,lineStyle + .TreeSeries.leaves.blur + .TreeSeries.blur + +# itemStyle,label,labelLine,upperLabel + .TreemapSeries.TreemapSeriesData.blur + .TreemapSeries.TreemapSeriesLevel.blur + .TreemapSeries.blur + +# itemStyle + .CandlestickSeries.CandlestickSeriesData.blur + .CandlestickSeries.blur + .BoxplotSeries.BoxplotSeriesData.blur + .BoxplotSeries.blur + +# edgeLabel,itemStyle,label,lineStyle + .SankeySeries.blur + .SankeySeries.SankeySeriesLevel.blur + .GraphSeries.blur + +# edgeLabel,lineStyle + .SankeySeries.SankeySeriesLink.blur + + +#geoRegion: 1 (similarity: 1) +# blur,emphasis,itemStyle,label,name,select,selected,silent,tooltip + .geo.geoRegion + + +#geo: 1 (similarity: 1) +# aspectScale,blur,bottom,boundingCoords,center,emphasis,id,itemStyle,label,layoutCenter,layoutSize,left,map,nameMap,nameProperty,projection,regions,right,roam,scaleLimit,select,selectedMode,show,silent,tooltip,top,z,zlevel,zoom + .geo + + +#parallelAxisDefault: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisTick,boundaryGap,data,interval,inverse,logBase,max,maxInterval,min,minInterval,minorTick,name,nameGap,nameLocation,nameRotate,nameTextStyle,nameTruncate,scale,silent,splitNumber,startValue,tooltip,triggerEvent,type + .parallel.parallelAxisDefault + + +#parallel: 1 (similarity: 1) +# axisExpandable,axisExpandCenter,axisExpandCount,axisExpandTriggerOn,axisExpandWidth,bottom,height,id,layout,left,parallelAxisDefault,right,top,width,z,zlevel + .parallel + + +#areaSelectStyle: 1 (similarity: 1) +# borderColor,borderWidth,color,opacity,width + .parallelAxis.areaSelectStyle + + +#parallelAxis: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,areaSelectStyle,axisLabel,axisLine,axisTick,boundaryGap,data,dim,id,interval,inverse,logBase,max,maxInterval,min,minInterval,minorTick,name,nameGap,nameLocation,nameRotate,nameTextStyle,nameTruncate,parallelIndex,realtime,scale,silent,splitNumber,startValue,tooltip,triggerEvent,type + .parallelAxis + + +#singleAxis: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisPointer,axisTick,bottom,boundaryGap,data,height,id,interval,inverse,left,logBase,max,maxInterval,min,minInterval,minorSplitLine,minorTick,name,nameGap,nameLocation,nameRotate,nameTextStyle,nameTruncate,orient,right,scale,silent,splitArea,splitLine,splitNumber,startValue,tooltip,top,triggerEvent,type,width,z,zlevel + .singleAxis + + +#checkpointStyle: 2 (similarity: 1,1) +# animation,animationDuration,animationEasing,borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize + .timeline.checkpointStyle + +# + .timeline.emphasis.checkpointStyle + + +#controlStyle: 2 (similarity: 1,1) +# borderCap,borderColor,borderDashOffset,borderJoin,borderMiterLimit,borderType,borderWidth,color,itemGap,itemSize,nextIcon,opacity,playIcon,position,prevIcon,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,showNextBtn,showPlayBtn,showPrevBtn,stopIcon + .timeline.controlStyle + +# + .timeline.emphasis.controlStyle + + +#progress: 2 (similarity: 1,1) +# itemStyle,label,lineStyle + .timeline.progress + +# clip,itemStyle,overlap,roundCap,show,width + .GaugeSeries.progress + + +#timeline: 1 (similarity: 1) +# autoPlay,axisType,bottom,checkpointStyle,controlPosition,controlStyle,currentIndex,data,emphasis,inverse,itemStyle,label,left,lineStyle,loop,orient,padding,playInterval,progress,realtime,replaceMerge,rewind,right,show,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,top,type,z,zlevel + .timeline + + +#dayLabel: 1 (similarity: 1) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,firstDay,fontFamily,fontSize,fontStyle,fontWeight,height,lineHeight,margin,nameMap,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,silent,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .calendar.dayLabel + + +#monthLabel: 1 (similarity: 1) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,margin,nameMap,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,silent,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .calendar.monthLabel + + +#yearLabel: 1 (similarity: 1) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,margin,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,silent,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .calendar.yearLabel + + +#calendar: 1 (similarity: 1) +# bottom,cellSize,dayLabel,height,id,itemStyle,left,monthLabel,orient,range,right,silent,splitLine,top,width,yearLabel,z,zlevel + .calendar + + +#FilterdatasetTransform: 1 (similarity: 1) +# config,print,type + .dataset.FilterdatasetTransform + + +#SortdatasetTransform: 1 (similarity: 1) +# config,print,type + .dataset.SortdatasetTransform + + +#dataset: 1 (similarity: 1) +# dimensions,fromDatasetId,fromDatasetIndex,fromTransformResult,id,source,sourceHeader,transform + .dataset + + +#endLabel: 4 (similarity: 1,3) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,minMargin,offset,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,valueAnimation,verticalAlign,width + .LineSeries.endLabel + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,offset,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .LineSeries.select.endLabel + .LineSeries.blur.endLabel + .LineSeries.emphasis.endLabel + + +#labelLine: 75 (similarity: 15,56,1,1,2) +# length2,lineStyle,minTurnAngle,show,showAbove,smooth + .CustomSeries.labelLine + .ThemeRiverSeries.labelLine + .PictorialBarSeries.PictorialBarSeriesData.labelLine + .PictorialBarSeries.labelLine + .MapSeries.MapSeriesData.labelLine + .MapSeries.labelLine + .SunburstSeries.labelLine + .SunburstSeries.SunburstSeriesData.labelLine + .TreemapSeries.labelLine + .EffectScatterSeries.EffectScatterSeriesData.labelLine + .EffectScatterSeries.labelLine + .ScatterSeries.ScatterSeriesData.labelLine + .ScatterSeries.labelLine + .LineSeries.LineSeriesData.labelLine + .LineSeries.labelLine + +# lineStyle,show + .ThemeRiverSeries.select.labelLine + .ThemeRiverSeries.blur.labelLine + .ThemeRiverSeries.emphasis.labelLine + .PictorialBarSeries.PictorialBarSeriesData.select.labelLine + .PictorialBarSeries.PictorialBarSeriesData.blur.labelLine + .PictorialBarSeries.PictorialBarSeriesData.emphasis.labelLine + .PictorialBarSeries.select.labelLine + .PictorialBarSeries.blur.labelLine + .PictorialBarSeries.emphasis.labelLine + .FunnelSeries.FunnelSeriesData.select.labelLine + .FunnelSeries.FunnelSeriesData.blur.labelLine + .FunnelSeries.FunnelSeriesData.emphasis.labelLine + .FunnelSeries.select.labelLine + .FunnelSeries.blur.labelLine + .FunnelSeries.emphasis.labelLine + .MapSeries.MapSeriesData.select.labelLine + .MapSeries.MapSeriesData.emphasis.labelLine + .SunburstSeries.SunburstSeriesLevel.labelLine + .TreemapSeries.TreemapSeriesData.select.labelLine + .TreemapSeries.TreemapSeriesData.blur.labelLine + .TreemapSeries.TreemapSeriesData.emphasis.labelLine + .TreemapSeries.TreemapSeriesLevel.select.labelLine + .TreemapSeries.TreemapSeriesLevel.blur.labelLine + .TreemapSeries.TreemapSeriesLevel.emphasis.labelLine + .TreemapSeries.select.labelLine + .TreemapSeries.blur.labelLine + .TreemapSeries.emphasis.labelLine + .EffectScatterSeries.EffectScatterSeriesData.select.labelLine + .EffectScatterSeries.EffectScatterSeriesData.blur.labelLine + .EffectScatterSeries.EffectScatterSeriesData.emphasis.labelLine + .EffectScatterSeries.select.labelLine + .EffectScatterSeries.blur.labelLine + .EffectScatterSeries.emphasis.labelLine + .ScatterSeries.ScatterSeriesData.select.labelLine + .ScatterSeries.ScatterSeriesData.blur.labelLine + .ScatterSeries.ScatterSeriesData.emphasis.labelLine + .ScatterSeries.select.labelLine + .ScatterSeries.blur.labelLine + .ScatterSeries.emphasis.labelLine + .PieSeries.PieSeriesData.select.labelLine + .PieSeries.PieSeriesData.blur.labelLine + .PieSeries.PieSeriesData.emphasis.labelLine + .PieSeries.select.labelLine + .PieSeries.blur.labelLine + .PieSeries.emphasis.labelLine + .BarSeries.BarSeriesData.select.labelLine + .BarSeries.BarSeriesData.blur.labelLine + .BarSeries.BarSeriesData.emphasis.labelLine + .BarSeries.BarSeriesData.labelLine + .BarSeries.select.labelLine + .BarSeries.blur.labelLine + .BarSeries.emphasis.labelLine + .BarSeries.labelLine + .LineSeries.select.labelLine + .LineSeries.blur.labelLine + .LineSeries.emphasis.labelLine + +# length,length2,lineStyle,maxSurfaceAngle,minTurnAngle,show,showAbove,smooth + .PieSeries.labelLine + +# length,length2,lineStyle,show,smooth + .PieSeries.PieSeriesData.labelLine + +# length,lineStyle,show + .FunnelSeries.FunnelSeriesData.labelLine + .FunnelSeries.labelLine + + +#encode: 11 (similarity: 11) +# + .CustomSeries.encode + .PictorialBarSeries.encode + .FunnelSeries.encode + .HeatmapSeries.encode + .CandlestickSeries.encode + .BoxplotSeries.encode + .EffectScatterSeries.encode + .ScatterSeries.encode + .PieSeries.encode + .BarSeries.encode + .LineSeries.encode + + +#LineSeriesData: 1 (similarity: 1) +# blur,childGroupId,emphasis,groupId,itemStyle,label,labelLine,name,select,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,value + .LineSeries.LineSeriesData + + +#markPointData: 14 (similarity: 8,5,1) +# coord,emphasis,itemStyle,label,name,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,type,value,valueDim,valueIndex,x,y + .PictorialBarSeries.markPoint.markPointData + .GraphSeries.markPoint.markPointData + .CandlestickSeries.markPoint.markPointData + .BoxplotSeries.markPoint.markPointData + .EffectScatterSeries.markPoint.markPointData + .ScatterSeries.markPoint.markPointData + .BarSeries.markPoint.markPointData + .LineSeries.markPoint.markPointData + +# emphasis,itemStyle,label,name,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,value,x,y + .GaugeSeries.markPoint.markPointData + .FunnelSeries.markPoint.markPointData + .LinesSeries.markPoint.markPointData + .HeatmapSeries.markPoint.markPointData + .PieSeries.markPoint.markPointData + +# coord,emphasis,itemStyle,label,name,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,value,valueDim,valueIndex,x,y + .MapSeries.markPoint.markPointData + + +#markPoint: 14 (similarity: 14) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,data,emphasis,itemStyle,label,silent,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize + .PictorialBarSeries.markPoint + .GaugeSeries.markPoint + .FunnelSeries.markPoint + .GraphSeries.markPoint + .LinesSeries.markPoint + .MapSeries.markPoint + .HeatmapSeries.markPoint + .CandlestickSeries.markPoint + .BoxplotSeries.markPoint + .EffectScatterSeries.markPoint + .ScatterSeries.markPoint + .PieSeries.markPoint + .BarSeries.markPoint + .LineSeries.markPoint + + +#markLine: 14 (similarity: 14) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,data,emphasis,label,lineStyle,precision,silent,symbol,symbolOffset,symbolSize + .PictorialBarSeries.markLine + .GaugeSeries.markLine + .FunnelSeries.markLine + .GraphSeries.markLine + .LinesSeries.markLine + .MapSeries.markLine + .HeatmapSeries.markLine + .CandlestickSeries.markLine + .BoxplotSeries.markLine + .EffectScatterSeries.markLine + .ScatterSeries.markLine + .PieSeries.markLine + .BarSeries.markLine + .LineSeries.markLine + + +#markArea: 14 (similarity: 14) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,data,emphasis,itemStyle,label,silent + .PictorialBarSeries.markArea + .GaugeSeries.markArea + .FunnelSeries.markArea + .GraphSeries.markArea + .LinesSeries.markArea + .MapSeries.markArea + .HeatmapSeries.markArea + .CandlestickSeries.markArea + .BoxplotSeries.markArea + .EffectScatterSeries.markArea + .ScatterSeries.markArea + .PieSeries.markArea + .BarSeries.markArea + .LineSeries.markArea + + +#universalTransition: 13 (similarity: 13) +# delay,divideShape,enabled,seriesKey + .CustomSeries.universalTransition + .PictorialBarSeries.universalTransition + .FunnelSeries.universalTransition + .LinesSeries.universalTransition + .MapSeries.universalTransition + .HeatmapSeries.universalTransition + .CandlestickSeries.universalTransition + .BoxplotSeries.universalTransition + .RadarSeries.universalTransition + .ScatterSeries.universalTransition + .PieSeries.universalTransition + .BarSeries.universalTransition + .LineSeries.universalTransition + + +#LineSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,areaStyle,blur,clip,colorBy,connectNulls,coordinateSystem,cursor,data,dataGroupId,datasetIndex,dimensions,emphasis,encode,endLabel,id,itemStyle,label,labelLayout,labelLine,legendHoverLink,lineStyle,markArea,markLine,markPoint,name,polarIndex,sampling,select,selectedMode,seriesLayoutBy,showAllSymbol,showSymbol,silent,smooth,smoothMonotone,stack,stackStrategy,step,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,triggerLineEvent,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .LineSeries + + +#backgroundStyle: 1 (similarity: 1) +# borderColor,borderRadius,borderType,borderWidth,color,opacity,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY + .BarSeries.backgroundStyle + + +#BarSeriesData: 1 (similarity: 1) +# blur,childGroupId,emphasis,groupId,itemStyle,label,labelLine,name,select,value + .BarSeries.BarSeriesData + + +#BarSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,backgroundStyle,barCategoryGap,barGap,barMaxWidth,barMinAngle,barMinHeight,barMinWidth,barWidth,blur,clip,colorBy,coordinateSystem,cursor,data,dataGroupId,datasetIndex,dimensions,emphasis,encode,id,itemStyle,label,labelLayout,labelLine,large,largeThreshold,legendHoverLink,markArea,markLine,markPoint,name,polarIndex,progressive,progressiveChunkMode,progressiveThreshold,realtimeSort,roundCap,sampling,select,selectedMode,seriesLayoutBy,showBackground,silent,stack,stackStrategy,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .BarSeries + + +#PieSeriesData: 1 (similarity: 1) +# blur,childGroupId,emphasis,groupId,itemStyle,label,labelLine,name,select,selected,tooltip,value + .PieSeries.PieSeriesData + + +#PieSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,animationType,animationTypeUpdate,avoidLabelOverlap,blur,bottom,calendarIndex,center,clockwise,colorBy,coordinateSystem,cursor,data,dataGroupId,datasetIndex,dimensions,emphasis,emptyCircleStyle,encode,endAngle,geoIndex,height,id,itemStyle,label,labelLayout,labelLine,left,legendHoverLink,markArea,markLine,markPoint,minAngle,minShowLabelAngle,name,padAngle,percentPrecision,radius,right,roseType,select,selectedMode,selectedOffset,seriesLayoutBy,showEmptyCircle,silent,startAngle,stillShowZeroSum,tooltip,top,type,universalTransition,width,z,zlevel + .PieSeries + + +#ScatterSeriesData: 1 (similarity: 1) +# blur,childGroupId,emphasis,groupId,itemStyle,label,labelLine,name,select,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,value + .ScatterSeries.ScatterSeriesData + + +#ScatterSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,calendarIndex,clip,colorBy,coordinateSystem,cursor,data,dataGroupId,datasetIndex,dimensions,emphasis,encode,geoIndex,id,itemStyle,label,labelLayout,labelLine,large,largeThreshold,legendHoverLink,markArea,markLine,markPoint,name,polarIndex,progressive,progressiveThreshold,select,selectedMode,seriesLayoutBy,silent,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .ScatterSeries + + +#rippleEffect: 1 (similarity: 1) +# brushType,color,number,period,scale + .EffectScatterSeries.rippleEffect + + +#EffectScatterSeriesData: 1 (similarity: 1) +# blur,emphasis,itemStyle,label,labelLine,select,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip + .EffectScatterSeries.EffectScatterSeriesData + + +#EffectScatterSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,calendarIndex,clip,colorBy,coordinateSystem,cursor,data,datasetIndex,dimensions,effectType,emphasis,encode,geoIndex,id,itemStyle,label,labelLayout,labelLine,legendHoverLink,markArea,markLine,markPoint,name,polarIndex,rippleEffect,select,selectedMode,seriesLayoutBy,showEffectOn,silent,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,type,xAxisIndex,yAxisIndex,z,zlevel + .EffectScatterSeries + + +#RadarSeriesData: 1 (similarity: 1) +# areaStyle,blur,childGroupId,emphasis,groupId,itemStyle,label,lineStyle,name,select,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,value + .RadarSeries.RadarSeriesData + + +#RadarSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,areaStyle,blur,colorBy,data,dataGroupId,emphasis,id,itemStyle,label,labelLayout,lineStyle,name,radarIndex,select,selectedMode,silent,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,type,universalTransition,z,zlevel + .RadarSeries + + +#leaves: 1 (similarity: 1) +# blur,emphasis,itemStyle,label,select + .TreeSeries.leaves + + +#TreeSeries: 1 (similarity: 1) +# blur,bottom,center,data,edgeForkPosition,edgeShape,emphasis,expandAndCollapse,height,id,initialTreeDepth,itemStyle,label,labelLayout,layout,leaves,left,lineStyle,name,orient,right,roam,select,selectedMode,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,top,type,width,z,zlevel,zoom + .TreeSeries + + +#upperLabel: 12 (similarity: 12) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,offset,overflow,padding,position,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .TreemapSeries.TreemapSeriesData.select.upperLabel + .TreemapSeries.TreemapSeriesData.blur.upperLabel + .TreemapSeries.TreemapSeriesData.emphasis.upperLabel + .TreemapSeries.TreemapSeriesData.upperLabel + .TreemapSeries.TreemapSeriesLevel.select.upperLabel + .TreemapSeries.TreemapSeriesLevel.blur.upperLabel + .TreemapSeries.TreemapSeriesLevel.emphasis.upperLabel + .TreemapSeries.TreemapSeriesLevel.upperLabel + .TreemapSeries.select.upperLabel + .TreemapSeries.blur.upperLabel + .TreemapSeries.emphasis.upperLabel + .TreemapSeries.upperLabel + + +#breadcrumb: 1 (similarity: 1) +# bottom,emphasis,emptyItemWidth,height,itemStyle,left,right,show,top + .TreemapSeries.breadcrumb + + +#TreemapSeriesLevel: 1 (similarity: 1) +# blur,childrenVisibleMin,color,colorAlpha,colorMappingBy,colorSaturation,emphasis,itemStyle,label,select,upperLabel,visibleMin,visualDimension,visualMax,visualMin + .TreemapSeries.TreemapSeriesLevel + + +#TreemapSeriesData: 1 (similarity: 1) +# blur,children,childrenVisibleMin,color,colorAlpha,colorMappingBy,colorSaturation,cursor,emphasis,id,itemStyle,label,link,name,select,target,tooltip,upperLabel,value,visibleMin,visualDimension,visualMax,visualMin + .TreemapSeries.TreemapSeriesData + + +#TreemapSeries: 1 (similarity: 1) +# animationDelay,animationDuration,animationEasing,blur,bottom,breadcrumb,childrenVisibleMin,colorAlpha,colorMappingBy,colorSaturation,cursor,data,drillDownIcon,emphasis,height,id,itemStyle,label,labelLayout,labelLine,leafDepth,left,levels,name,nodeClick,right,roam,scaleLimit,select,selectedMode,silent,squareRatio,tooltip,top,type,upperLabel,visibleMin,visualDimension,visualMax,visualMin,width,z,zlevel,zoomToNodeRatio + .TreemapSeries + + +#SunburstSeriesData: 1 (similarity: 1) +# blur,children,emphasis,itemStyle,label,labelLine,link,name,select,target,tooltip,value + .SunburstSeries.SunburstSeriesData + + +#SunburstSeriesLevel: 1 (similarity: 1) +# blur,emphasis,itemStyle,label,labelLine,radius,select + .SunburstSeries.SunburstSeriesLevel + + +#SunburstSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,center,clockwise,data,emphasis,id,itemStyle,label,labelLayout,labelLine,levels,name,nodeClick,radius,renderLabelForZeroData,select,selectedMode,sort,startAngle,tooltip,type,z,zlevel + .SunburstSeries + + +#BoxplotSeriesData: 1 (similarity: 1) +# blur,childGroupId,emphasis,groupId,itemStyle,name,select,tooltip,value + .BoxplotSeries.BoxplotSeriesData + + +#BoxplotSeries: 1 (similarity: 1) +# animationDelay,animationDuration,animationEasing,blur,boxWidth,colorBy,coordinateSystem,data,dataGroupId,dimensions,emphasis,encode,id,itemStyle,layout,legendHoverLink,markArea,markLine,markPoint,name,select,selectedMode,silent,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .BoxplotSeries + + +#CandlestickSeriesData: 1 (similarity: 1) +# blur,childGroupId,emphasis,groupId,itemStyle,name,select,tooltip,value + .CandlestickSeries.CandlestickSeriesData + + +#CandlestickSeries: 1 (similarity: 1) +# animationDelay,animationDuration,animationEasing,barMaxWidth,barMinWidth,barWidth,blur,clip,colorBy,coordinateSystem,data,dataGroupId,dimensions,emphasis,encode,id,itemStyle,large,largeThreshold,layout,legendHoverLink,markArea,markLine,markPoint,name,progressive,progressiveChunkMode,progressiveThreshold,select,selectedMode,silent,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .CandlestickSeries + + +#HeatmapSeriesData: 1 (similarity: 1) +# childGroupId,emphasis,groupId,itemStyle,label,name,value + .HeatmapSeries.HeatmapSeriesData + + +#HeatmapSeries: 1 (similarity: 1) +# blur,blurSize,calendarIndex,coordinateSystem,data,dataGroupId,datasetIndex,emphasis,encode,geoIndex,id,itemStyle,label,labelLayout,markArea,markLine,markPoint,maxOpacity,minOpacity,name,pointSize,progressive,progressiveThreshold,select,selectedMode,seriesLayoutBy,silent,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .HeatmapSeries + + +#MapSeriesData: 1 (similarity: 1) +# childGroupId,emphasis,groupId,itemStyle,label,labelLine,name,select,selected,silent,tooltip,value + .MapSeries.MapSeriesData + + +#MapSeries: 1 (similarity: 1) +# aspectScale,bottom,boundingCoords,center,colorBy,data,dataGroupId,datasetIndex,emphasis,geoIndex,id,itemStyle,label,labelLayout,labelLine,layoutCenter,layoutSize,left,map,mapValueCalculation,markArea,markLine,markPoint,name,nameMap,nameProperty,projection,right,roam,scaleLimit,select,selectedMode,seriesLayoutBy,showLegendSymbol,silent,tooltip,top,type,universalTransition,z,zlevel,zoom + .MapSeries + + +#ParallelSeriesData: 1 (similarity: 1) +# emphasis,lineStyle,name,value + .ParallelSeries.ParallelSeriesData + + +#ParallelSeries: 1 (similarity: 1) +# activeOpacity,animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,colorBy,coordinateSystem,data,emphasis,id,inactiveOpacity,lineStyle,name,parallelIndex,progressive,progressiveChunkMode,progressiveThreshold,realtime,silent,smooth,type,z,zlevel + .ParallelSeries + + +#effect: 1 (similarity: 1) +# color,constantSpeed,delay,loop,period,roundTrip,show,symbol,symbolSize,trailLength + .LinesSeries.effect + + +#LinesSeriesData: 1 (similarity: 1) +# blur,childGroupId,coords,emphasis,groupId,label,lineStyle,name,select,tooltip + .LinesSeries.LinesSeriesData + + +#LinesSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,clip,colorBy,coordinateSystem,data,dataGroupId,effect,emphasis,geoIndex,id,label,labelLayout,large,largeThreshold,lineStyle,markArea,markLine,markPoint,name,polyline,progressive,progressiveThreshold,select,selectedMode,silent,symbol,symbolSize,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .LinesSeries + + +#circular: 1 (similarity: 1) +# rotateLabel + .GraphSeries.circular + + +#force: 1 (similarity: 1) +# edgeLength,friction,gravity,initLayout,layoutAnimation,repulsion + .GraphSeries.force + + +#edgeLabel: 16 (similarity: 4,12) +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,overflow,padding,position,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .GraphSeries.select.edgeLabel + .GraphSeries.blur.edgeLabel + .GraphSeries.emphasis.edgeLabel + .GraphSeries.edgeLabel + +# align,backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,distance,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,offset,overflow,padding,rich,rotate,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,verticalAlign,width + .SankeySeries.SankeySeriesLink.select.edgeLabel + .SankeySeries.SankeySeriesLink.blur.edgeLabel + .SankeySeries.SankeySeriesLink.emphasis.edgeLabel + .SankeySeries.SankeySeriesLink.edgeLabel + .SankeySeries.select.edgeLabel + .SankeySeries.blur.edgeLabel + .SankeySeries.emphasis.edgeLabel + .SankeySeries.SankeySeriesLevel.select.edgeLabel + .SankeySeries.SankeySeriesLevel.blur.edgeLabel + .SankeySeries.SankeySeriesLevel.emphasis.edgeLabel + .SankeySeries.SankeySeriesLevel.edgeLabel + .SankeySeries.edgeLabel + + +#GraphSeriesCategory: 1 (similarity: 1) +# blur,emphasis,itemStyle,label,name,select,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize + .GraphSeries.GraphSeriesCategory + + +#GraphSeriesData: 1 (similarity: 1) +# blur,category,emphasis,fixed,itemStyle,label,name,select,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,value,x,y + .GraphSeries.GraphSeriesData + + +#GraphSeriesLink: 1 (similarity: 1) +# blur,emphasis,ignoreForceLayout,label,lineStyle,select,source,symbol,symbolSize,target,value + .GraphSeries.GraphSeriesLink + + +#GraphSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,autoCurveness,blur,bottom,calendarIndex,categories,center,circular,coordinateSystem,cursor,data,draggable,edgeLabel,edges,edgeSymbol,edgeSymbolSize,emphasis,force,geoIndex,height,id,itemStyle,label,labelLayout,layout,left,legendHoverLink,lineStyle,links,markArea,markLine,markPoint,name,nodes,nodeScaleRatio,polarIndex,right,roam,scaleLimit,select,selectedMode,silent,symbol,symbolKeepAspect,symbolOffset,symbolRotate,symbolSize,tooltip,top,type,width,xAxisIndex,yAxisIndex,z,zlevel,zoom + .GraphSeries + + +#SankeySeriesLevel: 1 (similarity: 1) +# blur,depth,edgeLabel,emphasis,itemStyle,label,lineStyle,select + .SankeySeries.SankeySeriesLevel + + +#SankeySeriesData: 1 (similarity: 1) +# blur,depth,emphasis,itemStyle,label,name,select,tooltip,value + .SankeySeries.SankeySeriesData + + +#SankeySeriesLink: 1 (similarity: 1) +# blur,edgeLabel,emphasis,lineStyle,select,source,target,value + .SankeySeries.SankeySeriesLink + + +#SankeySeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,bottom,data,draggable,edgeLabel,edges,emphasis,height,id,itemStyle,label,labelLayout,layoutIterations,left,levels,lineStyle,links,name,nodeAlign,nodeGap,nodes,nodeWidth,orient,right,select,selectedMode,silent,tooltip,top,type,width,z,zlevel + .SankeySeries + + +#FunnelSeriesData: 1 (similarity: 1) +# blur,emphasis,itemStyle,label,labelLine,name,select,tooltip,value + .FunnelSeries.FunnelSeriesData + + +#FunnelSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,bottom,colorBy,data,dataGroupId,datasetIndex,dimensions,emphasis,encode,funnelAlign,gap,height,id,itemStyle,label,labelLayout,labelLine,left,legendHoverLink,markArea,markLine,markPoint,max,maxSize,min,minSize,name,orient,right,select,selectedMode,seriesLayoutBy,silent,sort,tooltip,top,type,universalTransition,width,z,zlevel + .FunnelSeries + + +#detail: 2 (similarity: 2) +# backgroundColor,borderColor,borderDashOffset,borderRadius,borderType,borderWidth,color,ellipsis,fontFamily,fontSize,fontStyle,fontWeight,formatter,height,lineHeight,offsetCenter,overflow,padding,rich,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,show,textBorderColor,textBorderDashOffset,textBorderType,textBorderWidth,textShadowBlur,textShadowColor,textShadowOffsetX,textShadowOffsetY,valueAnimation,width + .GaugeSeries.detail + .GaugeSeries.GaugeSeriesData.detail + + +#GaugeSeriesData: 1 (similarity: 1) +# detail,itemStyle,name,title,value + .GaugeSeries.GaugeSeriesData + + +#pointer: 1 (similarity: 1) +# icon,itemStyle,keepAspect,length,offsetCenter,show,showAbove,width + .GaugeSeries.pointer + + +#anchor: 1 (similarity: 1) +# icon,itemStyle,keepAspect,offsetCenter,show,showAbove,size + .GaugeSeries.anchor + + +#GaugeSeries: 1 (similarity: 1) +# anchor,animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,axisLabel,axisLine,axisTick,center,clockwise,colorBy,data,detail,emphasis,endAngle,id,itemStyle,legendHoverLink,markArea,markLine,markPoint,max,min,name,pointer,progress,radius,silent,splitLine,splitNumber,startAngle,title,tooltip,type,z,zlevel + .GaugeSeries + + +#PictorialBarSeriesData: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,blur,childGroupId,emphasis,groupId,itemStyle,label,labelLine,name,select,symbol,symbolBoundingData,symbolClip,symbolMargin,symbolOffset,symbolPatternSize,symbolPosition,symbolRepeat,symbolRepeatDirection,symbolRotate,symbolSize,tooltip,value,z + .PictorialBarSeries.PictorialBarSeriesData + + +#PictorialBarSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,barCategoryGap,barGap,barMaxWidth,barMinAngle,barMinHeight,barMinWidth,barWidth,blur,clip,colorBy,coordinateSystem,cursor,data,dataGroupId,dimensions,emphasis,encode,id,itemStyle,label,labelLayout,labelLine,legendHoverLink,markArea,markLine,markPoint,name,select,selectedMode,silent,symbol,symbolBoundingData,symbolClip,symbolMargin,symbolOffset,symbolPatternSize,symbolPosition,symbolRepeat,symbolRepeatDirection,symbolRotate,symbolSize,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .PictorialBarSeries + + +#ThemeRiverSeriesData: 1 (similarity: 1) +# date,name,value + .ThemeRiverSeries.ThemeRiverSeriesData + + +#ThemeRiverSeries: 1 (similarity: 1) +# blur,bottom,boundaryGap,colorBy,coordinateSystem,data,emphasis,height,id,itemStyle,label,labelLayout,labelLine,left,name,right,select,selectedMode,singleAxisIndex,tooltip,top,type,width,z,zlevel + .ThemeRiverSeries + + +#CustomSeriesData: 1 (similarity: 1) +# childGroupId,emphasis,groupId,itemStyle,name,tooltip,value + .CustomSeries.CustomSeriesData + + +#CustomSeries: 1 (similarity: 1) +# animation,animationDelay,animationDelayUpdate,animationDuration,animationDurationUpdate,animationEasing,animationEasingUpdate,animationThreshold,calendarIndex,clip,colorBy,coordinateSystem,data,dataGroupId,datasetIndex,dimensions,encode,geoIndex,id,itemStyle,labelLayout,labelLine,legendHoverLink,name,polarIndex,renderItem,selectedMode,seriesLayoutBy,silent,tooltip,type,universalTransition,xAxisIndex,yAxisIndex,z,zlevel + .CustomSeries + + +#stateAnimation: 1 (similarity: 1) +# duration,easing + .stateAnimation + + +#query: 1 (similarity: 1) +# maxHeight,minAspectRatio,minWidth + .Media.query + + +#Media: 1 (similarity: 1) +# option,query + .Media + diff --git a/src/Vizor.ECharts.Demo.sln b/src/Vizor.ECharts.Demo.sln index 3d2d9338..0728f736 100644 --- a/src/Vizor.ECharts.Demo.sln +++ b/src/Vizor.ECharts.Demo.sln @@ -11,28 +11,92 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vizor.ECharts.Samples", "Vi EndProject Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vizor.ECharts.Sandbox", "Vizor.ECharts.Sandbox\Vizor.ECharts.Sandbox.csproj", "{F6530FCA-5924-4333-ADAC-71B567C111E2}" EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vizor.ECharts.Tests", "Vizor.ECharts.Tests\Vizor.ECharts.Tests.csproj", "{D184CA1E-DB9B-46D8-903D-18F0A19E70D6}" +EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Vizor.ECharts.BindingGenerator", "Vizor.ECharts.BindingGenerator\Vizor.ECharts.BindingGenerator.csproj", "{A648E55B-440C-449A-A759-969599344D56}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU + Debug|x64 = Debug|x64 + Debug|x86 = Debug|x86 Release|Any CPU = Release|Any CPU + Release|x64 = Release|x64 + Release|x86 = Release|x86 EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Debug|Any CPU.Build.0 = Debug|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Debug|x64.ActiveCfg = Debug|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Debug|x64.Build.0 = Debug|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Debug|x86.ActiveCfg = Debug|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Debug|x86.Build.0 = Debug|Any CPU {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Release|Any CPU.ActiveCfg = Release|Any CPU {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Release|Any CPU.Build.0 = Release|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Release|x64.ActiveCfg = Release|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Release|x64.Build.0 = Release|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Release|x86.ActiveCfg = Release|Any CPU + {57B9576D-1F54-41EC-A698-D133B64FD8D3}.Release|x86.Build.0 = Release|Any CPU {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Debug|Any CPU.Build.0 = Debug|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Debug|x64.ActiveCfg = Debug|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Debug|x64.Build.0 = Debug|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Debug|x86.ActiveCfg = Debug|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Debug|x86.Build.0 = Debug|Any CPU {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Release|Any CPU.ActiveCfg = Release|Any CPU {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Release|Any CPU.Build.0 = Release|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Release|x64.ActiveCfg = Release|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Release|x64.Build.0 = Release|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Release|x86.ActiveCfg = Release|Any CPU + {720FBA19-E82B-4AD3-953C-48AF8C07B212}.Release|x86.Build.0 = Release|Any CPU {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Debug|Any CPU.Build.0 = Debug|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Debug|x64.ActiveCfg = Debug|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Debug|x64.Build.0 = Debug|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Debug|x86.ActiveCfg = Debug|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Debug|x86.Build.0 = Debug|Any CPU {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Release|Any CPU.ActiveCfg = Release|Any CPU {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Release|Any CPU.Build.0 = Release|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Release|x64.ActiveCfg = Release|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Release|x64.Build.0 = Release|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Release|x86.ActiveCfg = Release|Any CPU + {582F6AE9-4B9A-41F2-BB38-2A38E622246E}.Release|x86.Build.0 = Release|Any CPU {F6530FCA-5924-4333-ADAC-71B567C111E2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {F6530FCA-5924-4333-ADAC-71B567C111E2}.Debug|Any CPU.Build.0 = Debug|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Debug|x64.ActiveCfg = Debug|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Debug|x64.Build.0 = Debug|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Debug|x86.ActiveCfg = Debug|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Debug|x86.Build.0 = Debug|Any CPU {F6530FCA-5924-4333-ADAC-71B567C111E2}.Release|Any CPU.ActiveCfg = Release|Any CPU {F6530FCA-5924-4333-ADAC-71B567C111E2}.Release|Any CPU.Build.0 = Release|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Release|x64.ActiveCfg = Release|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Release|x64.Build.0 = Release|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Release|x86.ActiveCfg = Release|Any CPU + {F6530FCA-5924-4333-ADAC-71B567C111E2}.Release|x86.Build.0 = Release|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Debug|Any CPU.Build.0 = Debug|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Debug|x64.ActiveCfg = Debug|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Debug|x64.Build.0 = Debug|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Debug|x86.ActiveCfg = Debug|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Debug|x86.Build.0 = Debug|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Release|Any CPU.ActiveCfg = Release|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Release|Any CPU.Build.0 = Release|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Release|x64.ActiveCfg = Release|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Release|x64.Build.0 = Release|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Release|x86.ActiveCfg = Release|Any CPU + {D184CA1E-DB9B-46D8-903D-18F0A19E70D6}.Release|x86.Build.0 = Release|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Debug|Any CPU.Build.0 = Debug|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Debug|x64.ActiveCfg = Debug|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Debug|x64.Build.0 = Debug|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Debug|x86.ActiveCfg = Debug|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Debug|x86.Build.0 = Debug|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Release|Any CPU.ActiveCfg = Release|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Release|Any CPU.Build.0 = Release|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Release|x64.ActiveCfg = Release|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Release|x64.Build.0 = Release|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Release|x86.ActiveCfg = Release|Any CPU + {A648E55B-440C-449A-A759-969599344D56}.Release|x86.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE diff --git a/src/Vizor.ECharts.Demo/App.razor b/src/Vizor.ECharts.Demo/App.razor index d414dad2..9731b5d6 100644 --- a/src/Vizor.ECharts.Demo/App.razor +++ b/src/Vizor.ECharts.Demo/App.razor @@ -1,4 +1,4 @@ - + diff --git a/src/Vizor.ECharts.Demo/Areas/Area/AreaSimple.razor b/src/Vizor.ECharts.Demo/Areas/Area/AreaSimple.razor index 5fc9c3fd..b83ec8f6 100644 --- a/src/Vizor.ECharts.Demo/Areas/Area/AreaSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Area/AreaSimple.razor @@ -1,4 +1,4 @@ -@page "/example/area/simple" +@page "/example/area/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Area; diff --git a/src/Vizor.ECharts.Demo/Areas/Area/AreaStacked.razor b/src/Vizor.ECharts.Demo/Areas/Area/AreaStacked.razor index 93b82d64..2248be17 100644 --- a/src/Vizor.ECharts.Demo/Areas/Area/AreaStacked.razor +++ b/src/Vizor.ECharts.Demo/Areas/Area/AreaStacked.razor @@ -1,4 +1,4 @@ -@page "/example/area/stacked" +@page "/example/area/stacked" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Area; diff --git a/src/Vizor.ECharts.Demo/Areas/Area/AreaTimeSeries.razor b/src/Vizor.ECharts.Demo/Areas/Area/AreaTimeSeries.razor index eeb66085..d140aa8a 100644 --- a/src/Vizor.ECharts.Demo/Areas/Area/AreaTimeSeries.razor +++ b/src/Vizor.ECharts.Demo/Areas/Area/AreaTimeSeries.razor @@ -1,8 +1,8 @@ -@page "/example/area/timeseries" +@page "/example/area/timeseries" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Area; - + \ No newline at end of file diff --git a/src/Vizor.ECharts.Demo/Areas/Bar/BarSimple.razor b/src/Vizor.ECharts.Demo/Areas/Bar/BarSimple.razor index 16067939..e8ae2c7f 100644 --- a/src/Vizor.ECharts.Demo/Areas/Bar/BarSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Bar/BarSimple.razor @@ -1,4 +1,4 @@ -@page "/example/bar/simple" +@page "/example/bar/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Bar; diff --git a/src/Vizor.ECharts.Demo/Areas/Bar/BarSimpleDataset.razor b/src/Vizor.ECharts.Demo/Areas/Bar/BarSimpleDataset.razor index f6ab96b7..9a8e7f15 100644 --- a/src/Vizor.ECharts.Demo/Areas/Bar/BarSimpleDataset.razor +++ b/src/Vizor.ECharts.Demo/Areas/Bar/BarSimpleDataset.razor @@ -1,4 +1,4 @@ -@page "/example/bar/simple-dataset" +@page "/example/bar/simple-dataset" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Bar; diff --git a/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedH.razor b/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedH.razor index 6ee9f538..bd90a590 100644 --- a/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedH.razor +++ b/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedH.razor @@ -1,4 +1,4 @@ -@page "/example/bar/stacked-h" +@page "/example/bar/stacked-h" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Bar; diff --git a/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedTimeSeries.razor b/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedTimeSeries.razor index bd67bdb6..e884e07f 100644 --- a/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedTimeSeries.razor +++ b/src/Vizor.ECharts.Demo/Areas/Bar/BarStackedTimeSeries.razor @@ -1,4 +1,4 @@ -@page "/example/bar/stacked-timeseries" +@page "/example/bar/stacked-timeseries" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Bar; diff --git a/src/Vizor.ECharts.Demo/Areas/Candlestick/CandlestickSimple.razor b/src/Vizor.ECharts.Demo/Areas/Candlestick/CandlestickSimple.razor index 55f07a19..da8a2181 100644 --- a/src/Vizor.ECharts.Demo/Areas/Candlestick/CandlestickSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Candlestick/CandlestickSimple.razor @@ -1,4 +1,4 @@ -@page "/example/candlestick/simple" +@page "/example/candlestick/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Candlestick; diff --git a/src/Vizor.ECharts.Demo/Areas/Funnel/FunnelSimple.razor b/src/Vizor.ECharts.Demo/Areas/Funnel/FunnelSimple.razor index 96d4f73f..639ce542 100644 --- a/src/Vizor.ECharts.Demo/Areas/Funnel/FunnelSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Funnel/FunnelSimple.razor @@ -1,4 +1,4 @@ -@page "/example/funnel/simple" +@page "/example/funnel/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Funnel; diff --git a/src/Vizor.ECharts.Demo/Areas/Gauge/TempGauge.razor b/src/Vizor.ECharts.Demo/Areas/Gauge/TempGauge.razor index 8839b348..bbead1d3 100644 --- a/src/Vizor.ECharts.Demo/Areas/Gauge/TempGauge.razor +++ b/src/Vizor.ECharts.Demo/Areas/Gauge/TempGauge.razor @@ -1,4 +1,4 @@ -@page "/example/gauge/temp" +@page "/example/gauge/temp" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Gauge; diff --git a/src/Vizor.ECharts.Demo/Areas/Geo/BelgianMunicipalityGeo.razor b/src/Vizor.ECharts.Demo/Areas/Geo/BelgianMunicipalityGeo.razor index 76cb0a46..c7016bf0 100644 --- a/src/Vizor.ECharts.Demo/Areas/Geo/BelgianMunicipalityGeo.razor +++ b/src/Vizor.ECharts.Demo/Areas/Geo/BelgianMunicipalityGeo.razor @@ -1,4 +1,4 @@ -@page "/example/geo/belgium" +@page "/example/geo/belgium" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Geo; diff --git a/src/Vizor.ECharts.Demo/Areas/Geo/FlightSeatsGeo.razor b/src/Vizor.ECharts.Demo/Areas/Geo/FlightSeatsGeo.razor index 1ce88b8d..162a06d6 100644 --- a/src/Vizor.ECharts.Demo/Areas/Geo/FlightSeatsGeo.razor +++ b/src/Vizor.ECharts.Demo/Areas/Geo/FlightSeatsGeo.razor @@ -1,4 +1,4 @@ -@page "/example/geo/flight-seats" +@page "/example/geo/flight-seats" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Geo; diff --git a/src/Vizor.ECharts.Demo/Areas/Geo/UsaGeo.razor b/src/Vizor.ECharts.Demo/Areas/Geo/UsaGeo.razor index ed4d9ccb..4036c07b 100644 --- a/src/Vizor.ECharts.Demo/Areas/Geo/UsaGeo.razor +++ b/src/Vizor.ECharts.Demo/Areas/Geo/UsaGeo.razor @@ -1,4 +1,4 @@ -@page "/example/geo/usa" +@page "/example/geo/usa" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Geo; diff --git a/src/Vizor.ECharts.Demo/Areas/Graph/GraphForceLayout.razor b/src/Vizor.ECharts.Demo/Areas/Graph/GraphForceLayout.razor index beb27e44..5744f21f 100644 --- a/src/Vizor.ECharts.Demo/Areas/Graph/GraphForceLayout.razor +++ b/src/Vizor.ECharts.Demo/Areas/Graph/GraphForceLayout.razor @@ -1,4 +1,4 @@ -@page "/example/graph/force-layout" +@page "/example/graph/force-layout" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Graph; diff --git a/src/Vizor.ECharts.Demo/Areas/Graph/GraphSimple.razor b/src/Vizor.ECharts.Demo/Areas/Graph/GraphSimple.razor index cc79dc53..6755f48e 100644 --- a/src/Vizor.ECharts.Demo/Areas/Graph/GraphSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Graph/GraphSimple.razor @@ -1,4 +1,4 @@ -@page "/example/graph/simple" +@page "/example/graph/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Graph; diff --git a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapMultiYear.razor b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapMultiYear.razor index b7be6509..32382c2b 100644 --- a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapMultiYear.razor +++ b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapMultiYear.razor @@ -1,4 +1,4 @@ -@page "/example/heatmap/multi-year" +@page "/example/heatmap/multi-year" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Heatmap; diff --git a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapSimple.razor b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapSimple.razor index 7b7e6441..2dabbc79 100644 --- a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapSimple.razor @@ -1,4 +1,4 @@ -@page "/example/heatmap/simple" +@page "/example/heatmap/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Heatmap; diff --git a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapVisitsPerDay.razor b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapVisitsPerDay.razor index 327278dc..0cd7460f 100644 --- a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapVisitsPerDay.razor +++ b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapVisitsPerDay.razor @@ -1,4 +1,4 @@ -@page "/example/heatmap/daily-visits" +@page "/example/heatmap/daily-visits" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Heatmap; diff --git a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapYear.razor b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapYear.razor index 9ea96c21..8ecd7d96 100644 --- a/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapYear.razor +++ b/src/Vizor.ECharts.Demo/Areas/Heatmap/HeatmapYear.razor @@ -1,4 +1,4 @@ -@page "/example/heatmap/year" +@page "/example/heatmap/year" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Heatmap; diff --git a/src/Vizor.ECharts.Demo/Areas/Line/LineSimple.razor b/src/Vizor.ECharts.Demo/Areas/Line/LineSimple.razor index ac01d608..d8fa2698 100644 --- a/src/Vizor.ECharts.Demo/Areas/Line/LineSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Line/LineSimple.razor @@ -1,4 +1,4 @@ -@page "/example/line/simple" +@page "/example/line/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Line; diff --git a/src/Vizor.ECharts.Demo/Areas/Line/LineSmooth.razor b/src/Vizor.ECharts.Demo/Areas/Line/LineSmooth.razor index 0f2a5511..61f03d23 100644 --- a/src/Vizor.ECharts.Demo/Areas/Line/LineSmooth.razor +++ b/src/Vizor.ECharts.Demo/Areas/Line/LineSmooth.razor @@ -1,4 +1,4 @@ -@page "/example/line/smooth" +@page "/example/line/smooth" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Line; diff --git a/src/Vizor.ECharts.Demo/Areas/Line/LineStacked.razor b/src/Vizor.ECharts.Demo/Areas/Line/LineStacked.razor index 6e9cde63..fa7fdd1e 100644 --- a/src/Vizor.ECharts.Demo/Areas/Line/LineStacked.razor +++ b/src/Vizor.ECharts.Demo/Areas/Line/LineStacked.razor @@ -1,4 +1,4 @@ -@page "/example/line/stacked" +@page "/example/line/stacked" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Line; diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/ColorGradientSample.razor b/src/Vizor.ECharts.Demo/Areas/Misc/ColorGradientSample.razor index 03e24839..8c86e70e 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/ColorGradientSample.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/ColorGradientSample.razor @@ -1,4 +1,4 @@ -@page "/example/misc/color-gradient" +@page "/example/misc/color-gradient" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Misc diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/DataLoaderSample.razor b/src/Vizor.ECharts.Demo/Areas/Misc/DataLoaderSample.razor index 4c77f0bd..92e28a31 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/DataLoaderSample.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/DataLoaderSample.razor @@ -1,4 +1,4 @@ -@page "/example/misc/dataloader" +@page "/example/misc/dataloader" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Misc; diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/MemoryTest.razor b/src/Vizor.ECharts.Demo/Areas/Misc/MemoryTest.razor index 0df74cb4..82359898 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/MemoryTest.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/MemoryTest.razor @@ -1,4 +1,4 @@ -@page "/example/misc/memory-test" +@page "/example/misc/memory-test" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Line; diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/MultiAxisSample.razor b/src/Vizor.ECharts.Demo/Areas/Misc/MultiAxisSample.razor index 3b31dfb6..7026508c 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/MultiAxisSample.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/MultiAxisSample.razor @@ -1,4 +1,4 @@ -@page "/example/misc/multi-axis" +@page "/example/misc/multi-axis" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Misc diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/ParameterSetSample.razor b/src/Vizor.ECharts.Demo/Areas/Misc/ParameterSetSample.razor index 30535061..6ffe6025 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/ParameterSetSample.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/ParameterSetSample.razor @@ -1,4 +1,4 @@ -@page "/example/misc/parameters" +@page "/example/misc/parameters" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Misc diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/RefreshSample.razor b/src/Vizor.ECharts.Demo/Areas/Misc/RefreshSample.razor index 28fdeb5a..cef18bc1 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/RefreshSample.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/RefreshSample.razor @@ -1,4 +1,4 @@ -@page "/example/misc/refresh" +@page "/example/misc/refresh" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Misc; diff --git a/src/Vizor.ECharts.Demo/Areas/Misc/ToolboxSample.razor b/src/Vizor.ECharts.Demo/Areas/Misc/ToolboxSample.razor index 0d5fe77e..05e36a8f 100644 --- a/src/Vizor.ECharts.Demo/Areas/Misc/ToolboxSample.razor +++ b/src/Vizor.ECharts.Demo/Areas/Misc/ToolboxSample.razor @@ -1,4 +1,4 @@ -@page "/example/misc/toolbox" +@page "/example/misc/toolbox" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Misc; diff --git a/src/Vizor.ECharts.Demo/Areas/Parallel/ParallelSimple.razor b/src/Vizor.ECharts.Demo/Areas/Parallel/ParallelSimple.razor index d186920f..ec224bcf 100644 --- a/src/Vizor.ECharts.Demo/Areas/Parallel/ParallelSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Parallel/ParallelSimple.razor @@ -1,4 +1,4 @@ -@page "/example/parallel/simple" +@page "/example/parallel/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Parallel diff --git a/src/Vizor.ECharts.Demo/Areas/PictorialBar/PictorialBarSimple.razor b/src/Vizor.ECharts.Demo/Areas/PictorialBar/PictorialBarSimple.razor index cf803e47..a58c3f1d 100644 --- a/src/Vizor.ECharts.Demo/Areas/PictorialBar/PictorialBarSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/PictorialBar/PictorialBarSimple.razor @@ -1,4 +1,4 @@ -@page "/example/pictorial-bar/simple" +@page "/example/pictorial-bar/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.PictorialBar diff --git a/src/Vizor.ECharts.Demo/Areas/Pie/DoughnutRounded.razor b/src/Vizor.ECharts.Demo/Areas/Pie/DoughnutRounded.razor index 53e218b7..5c0be7a1 100644 --- a/src/Vizor.ECharts.Demo/Areas/Pie/DoughnutRounded.razor +++ b/src/Vizor.ECharts.Demo/Areas/Pie/DoughnutRounded.razor @@ -1,4 +1,4 @@ -@page "/example/pie/doughnut-rounded" +@page "/example/pie/doughnut-rounded" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Pie; diff --git a/src/Vizor.ECharts.Demo/Areas/Pie/PieHalfDoughnut.razor b/src/Vizor.ECharts.Demo/Areas/Pie/PieHalfDoughnut.razor index 49d792c6..62ea3e29 100644 --- a/src/Vizor.ECharts.Demo/Areas/Pie/PieHalfDoughnut.razor +++ b/src/Vizor.ECharts.Demo/Areas/Pie/PieHalfDoughnut.razor @@ -1,4 +1,4 @@ -@page "/example/pie/half-doughnut" +@page "/example/pie/half-doughnut" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Pie; diff --git a/src/Vizor.ECharts.Demo/Areas/Pie/PieSimple.razor b/src/Vizor.ECharts.Demo/Areas/Pie/PieSimple.razor index f88e454d..cff08b3b 100644 --- a/src/Vizor.ECharts.Demo/Areas/Pie/PieSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Pie/PieSimple.razor @@ -1,4 +1,4 @@ -@page "/example/pie/simple" +@page "/example/pie/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Pie; diff --git a/src/Vizor.ECharts.Demo/Areas/Radar/RadarSimple.razor b/src/Vizor.ECharts.Demo/Areas/Radar/RadarSimple.razor index 037b69c4..148a3871 100644 --- a/src/Vizor.ECharts.Demo/Areas/Radar/RadarSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Radar/RadarSimple.razor @@ -1,4 +1,4 @@ -@page "/example/radar/simple" +@page "/example/radar/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Radar; diff --git a/src/Vizor.ECharts.Demo/Areas/Sankey/SankeySimple.razor b/src/Vizor.ECharts.Demo/Areas/Sankey/SankeySimple.razor index 70c31309..b1294b33 100644 --- a/src/Vizor.ECharts.Demo/Areas/Sankey/SankeySimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Sankey/SankeySimple.razor @@ -1,4 +1,4 @@ -@page "/example/sankey/simple" +@page "/example/sankey/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Sankey; diff --git a/src/Vizor.ECharts.Demo/Areas/Sankey/SankeyWithLevels.razor b/src/Vizor.ECharts.Demo/Areas/Sankey/SankeyWithLevels.razor index e9560a6b..c05ff1e1 100644 --- a/src/Vizor.ECharts.Demo/Areas/Sankey/SankeyWithLevels.razor +++ b/src/Vizor.ECharts.Demo/Areas/Sankey/SankeyWithLevels.razor @@ -1,4 +1,4 @@ -@page "/example/sankey/levels" +@page "/example/sankey/levels" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Sankey; diff --git a/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterCluster.razor b/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterCluster.razor index 52a59ad3..b63cd3ed 100644 --- a/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterCluster.razor +++ b/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterCluster.razor @@ -1,4 +1,4 @@ -@page "/example/scatter/cluster" +@page "/example/scatter/cluster" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Scatter; diff --git a/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterPunchCard.razor b/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterPunchCard.razor index 05cc4b6e..5c176d43 100644 --- a/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterPunchCard.razor +++ b/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterPunchCard.razor @@ -1,4 +1,4 @@ -@page "/example/scatter/punchcard" +@page "/example/scatter/punchcard" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Scatter; diff --git a/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterSimple.razor b/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterSimple.razor index 8cc8ae67..5ce45a1e 100644 --- a/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Scatter/ScatterSimple.razor @@ -1,4 +1,4 @@ -@page "/example/scatter/simple" +@page "/example/scatter/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Scatter; diff --git a/src/Vizor.ECharts.Demo/Areas/Sunburst/SunburstSimple.razor b/src/Vizor.ECharts.Demo/Areas/Sunburst/SunburstSimple.razor index 510ddf26..265b4f39 100644 --- a/src/Vizor.ECharts.Demo/Areas/Sunburst/SunburstSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/Sunburst/SunburstSimple.razor @@ -1,4 +1,4 @@ -@page "/example/sunburst/simple" +@page "/example/sunburst/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Sunburst; diff --git a/src/Vizor.ECharts.Demo/Areas/ThemeRiver/ThemeRiverSimple.razor b/src/Vizor.ECharts.Demo/Areas/ThemeRiver/ThemeRiverSimple.razor index da294753..76f9555c 100644 --- a/src/Vizor.ECharts.Demo/Areas/ThemeRiver/ThemeRiverSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/ThemeRiver/ThemeRiverSimple.razor @@ -1,4 +1,4 @@ -@page "/example/themeriver/simple" +@page "/example/themeriver/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.ThemeRiver; diff --git a/src/Vizor.ECharts.Demo/Areas/Tree/TreeLeftToRight.razor b/src/Vizor.ECharts.Demo/Areas/Tree/TreeLeftToRight.razor index 56670368..aba8c0b5 100644 --- a/src/Vizor.ECharts.Demo/Areas/Tree/TreeLeftToRight.razor +++ b/src/Vizor.ECharts.Demo/Areas/Tree/TreeLeftToRight.razor @@ -1,4 +1,4 @@ -@page "/example/tree/ltr" +@page "/example/tree/ltr" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.Tree; diff --git a/src/Vizor.ECharts.Demo/Areas/TreeMap/TreeMapSimple.razor b/src/Vizor.ECharts.Demo/Areas/TreeMap/TreeMapSimple.razor index f25d9ff1..147fcbe1 100644 --- a/src/Vizor.ECharts.Demo/Areas/TreeMap/TreeMapSimple.razor +++ b/src/Vizor.ECharts.Demo/Areas/TreeMap/TreeMapSimple.razor @@ -1,4 +1,4 @@ -@page "/example/treemap/simple" +@page "/example/treemap/simple" @using Vizor.ECharts; @using Vizor.ECharts.Samples.Areas.TreeMap; diff --git a/src/Vizor.ECharts.Demo/Components/GithubLink.razor b/src/Vizor.ECharts.Demo/Components/GithubLink.razor index 3fb43d96..4955fc4a 100644 --- a/src/Vizor.ECharts.Demo/Components/GithubLink.razor +++ b/src/Vizor.ECharts.Demo/Components/GithubLink.razor @@ -1,4 +1,4 @@ - + diff --git a/src/Vizor.ECharts.Demo/Components/PageHeader.razor b/src/Vizor.ECharts.Demo/Components/PageHeader.razor index 1132b1d0..e3f58ea4 100644 --- a/src/Vizor.ECharts.Demo/Components/PageHeader.razor +++ b/src/Vizor.ECharts.Demo/Components/PageHeader.razor @@ -1,4 +1,4 @@ -
+

@Title

@if (SubTitle != null) diff --git a/src/Vizor.ECharts.Demo/Data/WeatherForecast.cs b/src/Vizor.ECharts.Demo/Data/WeatherForecast.cs index 5c6d7fbc..b3429b5c 100644 --- a/src/Vizor.ECharts.Demo/Data/WeatherForecast.cs +++ b/src/Vizor.ECharts.Demo/Data/WeatherForecast.cs @@ -1,13 +1,13 @@ namespace Vizor.ECharts.Demo.Data { - public class WeatherForecast - { - public DateOnly Date { get; set; } + public class WeatherForecast + { + public DateOnly Date { get; set; } - public int TemperatureC { get; set; } + public int TemperatureC { get; set; } - public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); + public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); - public string? Summary { get; set; } - } + public string? Summary { get; set; } + } } \ No newline at end of file diff --git a/src/Vizor.ECharts.Demo/Data/WeatherForecastService.cs b/src/Vizor.ECharts.Demo/Data/WeatherForecastService.cs index 2da3b474..6ba2f280 100644 --- a/src/Vizor.ECharts.Demo/Data/WeatherForecastService.cs +++ b/src/Vizor.ECharts.Demo/Data/WeatherForecastService.cs @@ -1,20 +1,20 @@ namespace Vizor.ECharts.Demo.Data { - public class WeatherForecastService - { - private static readonly string[] Summaries = new[] - { - "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" - }; + public class WeatherForecastService + { + private static readonly string[] Summaries = new[] + { + "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" + }; - public Task GetForecastAsync(DateOnly startDate) - { - return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast - { - Date = startDate.AddDays(index), - TemperatureC = Random.Shared.Next(-20, 55), - Summary = Summaries[Random.Shared.Next(Summaries.Length)] - }).ToArray()); - } - } + public Task GetForecastAsync(DateOnly startDate) + { + return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast + { + Date = startDate.AddDays(index), + TemperatureC = Random.Shared.Next(-20, 55), + Summary = Summaries[Random.Shared.Next(Summaries.Length)] + }).ToArray()); + } + } } \ No newline at end of file diff --git a/src/Vizor.ECharts.Demo/Pages/Error.cshtml.cs b/src/Vizor.ECharts.Demo/Pages/Error.cshtml.cs index 2523caa1..b053c434 100644 --- a/src/Vizor.ECharts.Demo/Pages/Error.cshtml.cs +++ b/src/Vizor.ECharts.Demo/Pages/Error.cshtml.cs @@ -1,27 +1,27 @@ -using System.Diagnostics; +using System.Diagnostics; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; namespace Vizor.ECharts.Demo.Pages { - [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] - [IgnoreAntiforgeryToken] - public class ErrorModel : PageModel - { - public string? RequestId { get; set; } + [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] + [IgnoreAntiforgeryToken] + public class ErrorModel : PageModel + { + public string? RequestId { get; set; } - public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); + public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); - private readonly ILogger _logger; + private readonly ILogger _logger; - public ErrorModel(ILogger logger) - { - _logger = logger; - } + public ErrorModel(ILogger logger) + { + _logger = logger; + } - public void OnGet() - { - RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; - } - } + public void OnGet() + { + RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; + } + } } \ No newline at end of file diff --git a/src/Vizor.ECharts.Demo/Pages/Index.razor b/src/Vizor.ECharts.Demo/Pages/Index.razor index 8d963472..c75698c2 100644 --- a/src/Vizor.ECharts.Demo/Pages/Index.razor +++ b/src/Vizor.ECharts.Demo/Pages/Index.razor @@ -1,4 +1,4 @@ -@page "/" +@page "/" Vizor ECharts Demo diff --git a/src/Vizor.ECharts.Demo/Program.cs b/src/Vizor.ECharts.Demo/Program.cs index 1cb7ff71..773a4eb3 100644 --- a/src/Vizor.ECharts.Demo/Program.cs +++ b/src/Vizor.ECharts.Demo/Program.cs @@ -9,7 +9,7 @@ // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { - app.UseExceptionHandler("/Error"); + app.UseExceptionHandler("/Error"); } diff --git a/src/Vizor.ECharts.Demo/Shared/MainLayout.razor b/src/Vizor.ECharts.Demo/Shared/MainLayout.razor index 0036983d..3ee15f7f 100644 --- a/src/Vizor.ECharts.Demo/Shared/MainLayout.razor +++ b/src/Vizor.ECharts.Demo/Shared/MainLayout.razor @@ -1,4 +1,4 @@ -@inherits LayoutComponentBase +@inherits LayoutComponentBase Vizor.ECharts.Demo diff --git a/src/Vizor.ECharts.Demo/Shared/SideNav.razor b/src/Vizor.ECharts.Demo/Shared/SideNav.razor index 79644ea3..2896982e 100644 --- a/src/Vizor.ECharts.Demo/Shared/SideNav.razor +++ b/src/Vizor.ECharts.Demo/Shared/SideNav.razor @@ -1,4 +1,4 @@ -